HttpPostedFileBase Editor Template in ASP.NET MVC

Question

I am working with ASP.NET MVC 5 and have this simple ViewModel.

public class ArtistVM
{
    public string FName { get; set; }
    public string LName { get; set; }
    public HttpPostedFileBase ImgUpload { get; set; }
}

I know that I require a custom editor template for HttpPostedFileBase , so I have gone ahead and added a HttpPostedFileBase.cshtml to ~/Views/Shared/EditorTemplates/ inside that I have the following:

@model HttpPostedFileBase

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

This seem to work OK as far as displaying the input of type file!

The problem occurs when it comes to posting and binding, my ImgUpload property always comes back as null, which tells me something is not right in my Editor Template.

Code for the new artist view is shown below:

@using (Html.BeginForm("New", "Artist", FormMethod.Post, new { encrypt = "multipart/form-data"})) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.FName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FName, "", new { @class = "text-danger" })
            </div>
        </div>

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

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

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

And the Controller Action handling the post is:

[HttpPost]
public ActionResult New(ArtistNewVM vm)
{
    var validImageTypes = new string[]
    {
        "image/gif",
        "image/jpeg",
        "image/pjpeg",
        "image/png"
    };

    if (vm.ImgUpload == null || vm.ImgUpload.ContentLength == 0)
    {
        // ** gets inside here **
        ModelState.AddModelError("ImageUpload", "This field is required");
    }
    else if (!validImageTypes.Any(vm.ImgUpload.ContentType.Contains))
    {
        ModelState.AddModelError("ImageUpload", "Please choose either a GIF, JPG or PNG image.");
    }

    if (ModelState.IsValid)
    {
        // do the magic
    }

    return View(vm);
}

Answer 1

You have html attribute wrong in form it is enctype which stands for "encoding type" not encrypt see here

The enctype attribute's purpose is to indicate how form data should be encoded prior to it being sent to the location defined in the action attribute.

Change:

new { encrypt = "multipart/form-data"}

to:

new { enctype = "multipart/form-data"}