Upload multiple files in one form MVC4

asp.net-mvc, asp.net-mvc-4, c#, file-upload

Solution

Your problem is that you form creates a post request with information that the model binder can bind because the naming convention is not right.

you see, you have 4 file fields each with a different name, for the model binder to bind them correctly your controller action signature should look like this:

public ActionResult Create(HttpPostedFileBase mgmFile, 
                           HttpPostedFileBase logoFile, 
                           HttpPostedFileBase fohFile ,
                           HttpPostedFileBase bohFile)

Following MCV design pattern The best option would be to use a ViewModel that holds an `IEnumerable<HttpPostedFileBase>` and you would create a custom editor template for an `IEnumerable<HttpPostedFileBase>`

so that you could use it like that:

Html.EditorFor(m=>Model.filesUploaded)

and your controller action would look like this:

public ActionResult Create(MyViewModel i_InputModel)
{
    i_InputModel.filesUploade; //Use the files here to upload them.
}

Other options are: Use the HTML5 multiple attribute on the file input field like this:

<label for="mgmFile" class="col-sm-2 control-label">Files:</label>
<div class="col-sm-6">
    <input type="file" multiple="multiple" name="files" id="files" />
</div>

and a controller action like this:

public ActionResult Create(HttpPostedFileBase files)

or use multiple file fields but index them in their name:

<input type="file" multiple="multiple" name="files[0]" id="files_1" />
<input type="file" multiple="multiple" name="files[1]" id="files_2" />
<input type="file" multiple="multiple" name="files[2]" id="files_3" />
<input type="file" multiple="multiple" name="files[3]" id="files_4" />

and then you could use a controller action like this:

public ActionResult Create(IEnumerable<HttpPostedFileBase> files)

Problem

Original source