HttpPostedFileBase not binding to model

Question

here is my ViewModel

public class FaultTypeViewModel
{
    [HiddenInput(DisplayValue = false)]
    public int TypeID { get; set; }

    [Required(ErrorMessageResourceType = typeof(AdministrationStrings), ErrorMessageResourceName = "FaultTypeNameRequired")]
    [Display(ResourceType = typeof(AdministrationStrings), Name = "FaultTypeName")]
    public string TypeName { get; set; }

    [Display(ResourceType = typeof(AdministrationStrings), Name = "FaultTypeDescription")]
    [DataType(DataType.MultilineText)]
    public string TypeDescription { get; set; }

    [Display(ResourceType = typeof(AdministrationStrings), Name = "FaultTypeImageFile")]
    public HttpPostedFileBase TypeImageFile { get; set; }

    [HiddenInput(DisplayValue = false)]
    public string TypeImageURL { get; set; }
}

Notice I have a "TypeImageFile" HttpPostedFileBase I would expect that the model binder would bond that property from the form to the model passes to the controller bu I just keep receiving null.

here is the relevant code in the View:

@using (Html.BeginForm("AddFaultType","Administration", FormMethod.Post))
{

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">@SharedStrings.Add @SharedStrings.FaultType</h3>
    </div>
    <div class="modal-body">
        @Html.ValidationSummary(true)
        <div class="editor-label">
            @Html.LabelFor(model => model.TypeName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TypeName)
            @Html.ValidationMessageFor(model => model.TypeName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.TypeDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.TypeDescription)
            @Html.ValidationMessageFor(model => model.TypeDescription)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.TypeImageFile)
        </div>
        <div class="editor-field">
            <input type="file" name="TypeImageFile" id="TypeImageFile" />
        </div>
    </div>

    <div class="modal-footer">
        <input type="submit" value="@SharedStrings.Add" class="btn btn-primary" />
        @Html.ActionLink(SharedStrings.Cancel, "Index", "Administration", null, new { Class = "btn", data_dismiss = "modal", aria_hidden = "true" })
    </div>
}

and here is the controller:

        [HttpPost]
        public ActionResult AddFaultType(FaultTypeViewModel i_FaultToAdd)
        {
            var fileName = Path.GetFileName(i_FaultToAdd.TypeImageFile.FileName);
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            i_FaultToAdd.TypeImageFile.SaveAs(path);

            return RedirectToAction("Index");
        }

Answer 1

Make sure you've set the enctype attribute on your form to multipart/form-data on your form if you want to be able to upload files:

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