@ Html.EditorFor (image)

Question

I am trying to allow a user to upload an image to our site, and I'm not quite sure how to use it. I tried using several types to define the image, including System.Drawing.Image and HttpPostedFileWrapper , but @Html.EditorFor always (clearly) displays its attributes as editable fields.

In my opinion, I had, instead of @Html.EditorFor , I had <input type="file" name="imageToUpload" /> , but it did not work out before my presentation as part of the Model ? I am new to MVC, so I hope this is something trivial.

Here is my view:

 @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>New Image</legend> <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.Image) </div> <div class="editor-field"> <input type="file" name="imageToUpload" /> </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } 

My controller:

  [HttpPost] public ActionResult CreateImage(string brand, string collection, ImageEditViewModel imageEditViewModel) { string fileName = Guid.NewGuid().ToString(); string serverPath = Server.MapPath("~"); string imagesPath = serverPath + String.Format("Content\\{0}\\Images\\", Helper.Helper.ResolveBrand()); string newLocation = Helper.Helper.SaveImage(fileName, imagesPath, imageEditViewModel.Image.InputStream) Image image = new Image { Collection = ds.Single<Collection>(c => c.Season == collection && c.Brand.Name == brand), Description = imageEditViewModel.Description, Location = "newLocation", Order = Helper.Helper.GetImageOrder(brand, collection) }; ds.InsertOnSubmit<Image>(image); ds.SubmitChanges(); return RedirectToAction("Brand"); } 

And finally, ViewModel:

 public class ImageEditViewModel { public int CollectionId { get; set; } public string Description { get; set; } public HttpPostedFileWrapper Image { get; set; } public int Order { get; set; } } 

Answer 1

Make sure that you correctly specified enctype="multipart/form-data" in your form or that you cannot upload files:

 @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.ValidationSummary(true) <fieldset> <legend>New Image</legend> <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.ImageToUpload) </div> <div class="editor-field"> <input type="file" name="imageToUpload" /> </div> <p> <input type="submit" value="Create" /> </p> </fieldset> } 

And if you want to use the helper EditorFor to generate file input, you can use the following:

 <div class="editor-label"> @Html.LabelFor(model => model.ImageToUpload) </div> <div class="editor-field"> @Html.EditorFor(model => model.ImageToUpload) </div> 

and then define a custom editor template for the HttpPostedFileBase type (see below that you need to change your model to use this type in fact). Therefore, the editor template in ~/Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml :

 @model HttpPostedFileBase @Html.TextBox("", null, new { type = "file" }) 

and in the model of your view, use the HttpPostedFileBase type and make sure that the property name matches the file input name in your form:

 public class ImageEditViewModel { public int CollectionId { get; set; } public string Description { get; set; } public HttpPostedFileBase ImageToUpload { get; set; } public int Order { get; set; } } 

Also, be sure to check out the following blog post .