ASP.NET MVC upload photo - httpPostedFileBase is null

Question

EDIT:

Photo has null value in controller post method despite that i uploaded it..

My model class is :

class ProductVM{
    public string Name { get; set;}
    public string Color {get; set;}
    public HttpPostedFileBase Photo1 { get; set; }
    }

Here is how I implemented view with Razor:

    @model Project.Models.ProductVM

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


           @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new {@class = "text-danger"})

            @Html.EditorFor(model => model.Name, new {htmlAttributes = new {@class"form-control"}})
            @Html.ValidationMessageFor(model => model.Name)

        // other fields editor's and dropdown's ...


            <div class="col-xs-offset-2 col-xs-8 add-item-rectangle"><input type="file" name="@Model.Photo1" id="file"/></div>
            <div class="col-xs-10 add-item-rectangle"></div>

       <input type="submit" class="btn btn-block add-item-button-text" value="Send"/>

Post Controller method's :

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddItem(ProductVM product)
        {            
             //**heere when debuging Photo1 is null despite fact that i uploaded photo**

            if (!ModelState.IsValid)
            {
                //... my stuffs
            }

            //..
           return RedirectToAction("Index", "Home");
        }

See: [this](http://stackoverflow.com/questions/16255882/uploading-displaying-images-in-mvc-4) — Nick, Dec 27 '16 at 15:19
Sorry, because I am a bit stuck in there. I read about 5 examples now. Is it possible to display an image as DOM after user click's inside my rectangle and upload photo, AND send data from whole form when SUBMIT button will be clicked, and then in Post Method save whole data from form along with image to database(from entity class)? I am looking for exactly this kind of example to work together fine... — mike_pl, Dec 27 '16 at 19:26

Chris Pratt · Accepted Answer · 2016-12-28T13:45:27.473

2

First and foremost, you cannot post directly to a byte array. As a result, you'll need a view model to represent the product being created/modified. On your view model, your file upload properties should be typed as HttpPostedFileBase:

public HttpPostedFileBase Image1Upload { get; set; }
public HttpPostedFileBase Image2Upload { get; set; }

Your post action will accept your view model as a param:

[HttpPost]
public ActionResult CreateProduct(ProductViewModel model)

Inside this action, you'll map over the posted values on the view model to the corresponding properties on your entity class. For your uploads:

if (model.Image1Upload != null && model.Image1Upload.ContentLength > 0)
{
    using (var ms = new MemoryStream())
    {
        model.Image1Upload.InputStream.CopyTo(ms);
        product.Image1 = ms.ToArray();
    }
}

Rinse and repeat for the other upload. You'll probably also want to add some validation to ensure that the uploaded file(s) are in fact images, but that's left as an exercise for the reader.

Finally, you'll just save your entity as normal.

UPDATE

In your updated code, you have the following:

<div class="col-xs-offset-2 col-xs-8 add-item-rectangle">
    <input type="file" name="@Model.Photo1" id="file"/>
</div>

First, @Model.Photo1 would merely output the value of Model.Photo1, which isn't even possible with a file. Instead, Razor would just call ToString on the property and you'd get a name attribute like name="System.Web.HttpPostedFileBase". That's obviously not correct. What you'd need instead is something like:

<input type="file" name="@Html.NameFor(m => m.Photo1)" id="file" />

Or, even better, use a helper to generate the whole input:

@Html.TextBoxFor(m => m.Photo1, new { type = "file" })

edited Dec 28 '16 at 13:45

answered Dec 27 '16 at 15:51

Chris Pratt

232,153
36
385
444

This things, are clear for me.. what is the main problem I wrote at comment 1 post above – mike_pl Dec 27 '16 at 19:27
I don't see what you're missing. – Chris Pratt Dec 27 '16 at 19:42
HttpPostedFileBase type wouldn't allow me to use code first approach and create entity set of Type Product – mike_pl Dec 27 '16 at 19:59
1

Again, you *must* use a view model for this. You simply cannot use your entity class directly. There is no way to post directly to a byte array property. – Chris Pratt Dec 27 '16 at 20:00
So in my viewmodel there will be HttpPostedFileBase as type of photo object, but in entity class byte[] ? – mike_pl Dec 27 '16 at 20:01
1

Yes. All of this is in my answer above, including how to get the data from the uploaded file onto your byte array property. – Chris Pratt Dec 27 '16 at 20:02
and is there possibility with HttpPostedFileBase to display it's small in my view just after choosing a photo? I mean append it to DOM using javascript? – mike_pl Dec 27 '16 at 20:46
Here occurred a problem, I cannot solve it, my post is updated. – mike_pl Dec 27 '16 at 21:44

ASP.NET MVC upload photo - httpPostedFileBase is null

1 Answers1

Linked