@Html.EditorFor (Image)

Question

I am trying to allow a user to upload an image to our website and I'm not quite sure about how to use this. I have tried to use multiple types to define the image, including System.Drawing.Image and HttpPostedFileWrapper but the @Html.EditorFor always (understandably) brings up its attributes as fields to edit.

In my view I did have, instead of @Html.EditorFor I did have <input type="file" name="imageToUpload" /> but it didn't get taken through to my view as part of the Model? I am quite new to MVC so I am hoping it 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 the 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

Ensure to specify the correct enctype="multipart/form-data" on your form or you won't be able to 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 wanted to use an EditorFor helper to generate the file input you could 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 modify your model to use this type actually). So the editor template in ~/Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml:

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

and on your view model use the HttpPostedFileBase type and make sure that the name of the property matches the name of the file input on 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 make sure to checkout the following blog post.