Upload image included in MVC model

how to add image in mvc view
display image from folder in mvc
how to upload image in database using asp.net mvc
image upload in mvc using entity framework
how to upload and retrieve image from database in asp net mvc
upload image in mvc 5 razor
upload and display image using jquery in asp.net mvc
mvc image upload with preview

I have the following model:

public class Photo
{
    public int PhotoId { get; set; }
    public byte[] ImageData { get; set; }
    public DateTime DateUploaded { get; set; }
    public string Description { get; set; }
    public bool IsActive { get; set; }

}

I would like the user to be able to enter the details for the photo then post the model the the controller. My controller action is as follows:

[HttpPost]
    public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
    {
        if (ModelState.IsValid)
        {
            photo.DateUploaded = DateTime.Now;
            _context.Photos.Add(photo);
            _context.SaveChanges();

            return RedirectToAction("Index");
        }
        //we only get here if there was a problem
        return View(photo);
    }

My view is as follows:

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Photo</h4>
    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.ImageData, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="file" name="uploadImages" class="input-files" />
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DateUploaded, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateUploaded)
            @Html.ValidationMessageFor(model => model.DateUploaded)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.IsActive, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.IsActive)
            @Html.ValidationMessageFor(model => model.IsActive)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

The view is displayed ok and allows the user to select a file from their local disk and enter the other model details. My problem is that although the model is posted to the controller ok, the Description, Date and IsActive flags are populated ok - the Image data is null.

Could anyone please let me know what I need to change so that the byte array for the photo is included in the model posted to the controller?


The file input in your view has a name uploadImages. I can't see a property with this name in your view model. You seem to have some ImageData property which is a byte array, but there doesn't seem to be a corresponding input field with this name in your view.

This explains why you get null. You could make this work by respecting the convention. So for example if you intend to have such an input field in your view:

<input type="file" name="uploadImages" class="input-files" />

then make sure that you have a property on your view model with the same name. And of course of type HttpPostedFileBase.

public HttpPostedFileBase UploadImages { get; set; }

Also in your view make sure you are setting the proper content type of multipart/form-data:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ...
}

You probably might want to go through the following blog post to better familiarize yourself with the basics of how uploading of files work in ASP.NET MVC. I've also written a similar answer here that you might consult.

So once you add the HttpPostedFileBase property with the UploadImages name in your view model you could adapt your controller action to read the byte array and store it your ImageData property:

[HttpPost]
public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
{
    if (ModelState.IsValid)
    {
        photo.DateUploaded = DateTime.Now;
        photo.ImageData = new byte[photo.UploadImages.ContentLength];
        photo.UploadImages.Read(photo.ImageData, 0, photo.ImageData.Length);

        _context.Photos.Add(photo);
        _context.SaveChanges();

        return RedirectToAction("Index");
    }

    //we only get here if there was a problem
    return View(photo);
}

Now bear in mind that this is an absolutely awful solution. Never do that in a real world application. In a correctly designed application you will have a view model that your controller action will take as a parameter. You're never gonna directly use your autogenerated EF model as parameter to your controller action. You will have a view model with the HttpPostedFileBase property which will be mapped to your domain model.

So in a properly designed application you will have a PhotoViewModel view model class that your controller action will take.

Upload image included in MVC model, This article is not specific to image file only, you can use the provided solution with NET MVC 5 - Upload Image/File Into Database Now, create a new "​Models\ImgViewModel.cs" file and replace the following code in it i.e.:. ASP.NET MVC 5 - Upload Image/File Into Database Step 1. First, create your SQL server database and name it "db_img". Then execute following script into your SQL server Step 2. Create a new MVC web project and name it "ImgSaveDb". Step 3. In the above code, I have simply created a basic default


Change this line:

@using (Html.BeginForm()) 

To this:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))

Then change:

<input type="file" name="uploadImages" class="input-files" />

To:

<input type="file" name="ImageData" class="input-files" />

Then change this line:

 public byte[] ImageData { get; set; }

To this:

 public HttpPostedFileBase ImageData { get; set; }

Finally, use some code like this to read the image into a byte array:

 var bs = new byte[ImageData.ContentLength];
 using (var fs = ImageData.InputStream)
 {
     var offset = 0;
     do
     {
         offset += fs.Read(bs, offset, bs.Length - offset);
     } while (offset < bs.Length);
 }

ASP.NET MVC 5 - Upload Image/File Into Database, As we know image uploading is very common task to do. In this article I am explaining how to upload image in mvc using Model. In my next article I will explain  Here Mudassar Ahmed Khan has explained with an example, how to upload Image and save in Database in ASP.Net MVC Razor. The Images will be uploaded and converted to Binary format (Byte Array) and saved (inserted) to SQL Server database table in ASP.Net MVC Razor. TAGs: ASP.Net, SQL Server, Entity Framework, FileUpload, MVC, WebGrid, Image


View:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   ...
   <input type="file" id="ImageFile" name="ImageFile" .../>
   ...
}

Controller:

[HttpPost]
public ActionResult Create(Photo photo, HttpPostedFileBase ImageFile)
{
    byte[] buf = new byte[ImageFile.ContentLength];
    ImageFile.InputStream.Read(buf, 0, buf.Length);
    photo.ImageData = buf;
    ...
}

how to upload image in mvc using model, During the file upload process, only two parts of the MVC model interact with each other – a view and a input type = "submit" value = "Upload Image" />. Upload Images on Server Folder Using ASP.NET MVC Step 1: Create an MVC Application. Step 2: Create Model Class


How to Upload Image And Display Image in Asp.Net Mvc With An , For this example, we'll be creating an Image type, which will simply be an entity to hold data about an image we upload. It'll include properties  Additionally our image uploader should be able to perform an easy crop job. Our image uploader will have (about) the same options as the one that is used by Google for uploading images in the contacts web application. We will include the following options: From the local file system (standard file upload) From another URL (resource from the


How to upload files to ASP.NET MVC application, Sometimes we require to upload the images on the server folder for specific learn two ways to read the uploaded files into the controller which are listed below, Index.cshtml. @model UploadingFilesUsingMVC.Models. Subscribe File Uploads in ASP.NET MVC with View Models 06 January 2014 on asp.net-mvc, view-models, uploads, forms. When I was first starting out in ASP.NET MVC, one of the things I struggled with the most was how to do file uploads while posting additional model data.


File Uploads in ASP.NET MVC with View Models, Create a New Project; Create Database, Table and Image Folder; Add ADO.NET Entity Data Model; Add a  Some time ago, I wrote a custom control for ASP.NET that could display an image directly from the database without a file-based image source. Because of the way that ASP.NET MVC works, it is not feasible to use this technique. However, now that modern browsers all support the "data" protocol for displaying images, there is an easy alternative.