MVC HttpPostedFileBase always null

Question

I have this controller and what I am trying to do is to send an image to the controller as a [byte], this is my controller:

[HttpPost]
public ActionResult AddEquipment(Product product, HttpPostedFileBase image) 
 {

            if (image != null) 
            {
                product.ImageMimeType = image.ContentType;
                product.ImageData = new byte[image.ContentLength];
                image.InputStream.Read(product.ImageData, 0, image.ContentLength);
            }

            _db.Products.Add(product);
            _db.SaveChanges();

            return View();
 }

and on my view:

@using (Html.BeginForm("AddEquipment", "Equipment", FormMethod.Post)) {

    <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.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.Category)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Category)
            @Html.ValidationMessageFor(model => model.Category)
        </div>

        <div>
        <div>IMAGE</div>
        <input type="file" name="image" />

        </div>


        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

but the problem is that on my controller the value for image is alway null, I cant seem to get any information on the HttpPostedFileBase

Answer 1

You need to add the encType with multipart/form-data.

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

You can always add it to your model too as follows, providing it is a ViewModel:

public class Product 
{
    public Product()
    {
        Files = new List<HttpPostedFileBase>();
    }

    public List<HttpPostedFileBase> Files { get; set; }
    // Rest of model details
}

You can the retrieve the files by removing the un-needed parameter ie

[HttpPost]
public ActionResult AddEquipment(Product product) 
 {
    var file = model.Files[0];
    ...
 }

Answer 2

Try to do this at the top of the Action method:

[HttpPost]
    public ActionResult AddEquipment(Product product, HttpPostedFileBase image)
    {
        image = image ?? Request.Files["image"];
        // the rest of your code
    }

And the form should have enctype of "multipart/form-data" to upload files:

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