ASP.NET MVC 4 Cannot get file from form

Question

I am working on a website and I am trying to upload an image and save its path in the database.

The problem is that I just cannot get the downloaded file from the form.

Here is the form

@using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>Product</legend> <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.Description) </div> <div class="editor-field"> @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div> <div class="editor-label"> @Html.LabelFor(model => model.Location) </div> <div class="editor-field"> @Html.EditorFor(model => model.Location) @Html.ValidationMessageFor(model => model.Location) </div> <div class="editor-label"> @Html.LabelFor(model => model.Condition) </div> <div class="editor-field"> @Html.EditorFor(model => model.Condition) @Html.ValidationMessageFor(model => model.Condition) </div> <div class="editor-label"> @Html.LabelFor(model => model.Price) </div> <div class="editor-field"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> <div class="editor-label"> @Html.LabelFor(model => model.PostedBy) </div> <div class="editor-field"> @Html.EditorFor(model => model.PostedBy) @Html.ValidationMessageFor(model => model.PostedBy) </div> <div class="editor-field"> Upload Image <input type="file" name="listingImage" /> </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } 

And here is the action

 [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create(Product product, HttpPostedFileBase listingImage) { if (listingImage == null) { return RedirectToAction("Index"); } if (ModelState.IsValid) { db.Products.Add(product); db.SaveChanges(); return RedirectToAction("Index"); } return View(product); } 

I have a model for customizing a product list, for example.

  public class Product { public int ID { get; set; } public string Name { get; set; } public string Description { get; set; } public string Location { get; set; } public string Condition { get; set; } public decimal Price { get; set; } public string PostedBy { get; set; } public string PhotoPath { get; set; } } 

Now every time I fill out a form and submit a listingImage, it is null and I return to the index.

Is there something I am missing?

Thanks.

Answer 1

You must set the encoding type of your form to "multipart / form-data", otherwise you will not be able to publish files.

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

And yes, you can define your file separately from your model data and declare the action of the controller, as you did before, you do not need to include the file field in the model class:

 public ActionResult Create(Product product, HttpPostedFileBase listingImage) 

Answer 2

listingImage not part of your model, and then it does not get the same binding as the rest of the properties of Model.xx .

You can update Product to enable HttpPostedFileBase listingImage , and change the action of the controller to

 public ActionResult Create(Product product) 

In your html you can add a new property like this

 @using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" })){ @* Forgot this line as Alex Skalozub told in his answer *@ @* code omitted *@ <div class="editor-field"> @Html.TextBoxFor(model => model.listingImage, new {type = "file"}) </div> } 

You can do something in lines to arrange the file and save

 var path = Path.Combine(Server.MapPath("~/images/products"),product.listingImage.FileName); product.listingImage.SaveAs(path);