Upload multiple files to a single MVC4 form

Question

I am trying to upload multiple images in one form

@using (Html.BeginForm("Create", "AdminRestaurants", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div class="form-group"> <label for="logoFile" class="col-sm-2 control-label">Logo:</label> <div class="col-sm-6"> <input type="file" multiple="" name="logoFile" id="logoFile" /> </div> </div> <div class="form-group"> <label for="fohFile" class="col-sm-2 control-label">FOH Logo:</label> <div class="col-sm-6"> <input type="file" multiple="" name="fohFile" id="fohFile" /> </div> </div> <div class="form-group"> <label for="bohFile" class="col-sm-2 control-label">BOH Logo:</label> <div class="col-sm-6"> <input type="file" multiple="" name="bohFile" id="bohFile" /> </div> </div> <div class="form-group"> <label for="mgmFile" class="col-sm-2 control-label">MGM Logo:</label> <div class="col-sm-6"> <input type="file" multiple="" name="mgmFile" id="mgmFile" /> </div> </div> 

I am trying to process a form on a controller using this

 public ActionResult Create(IEnumerable<HttpPostedFileBase> files, RestaurantModel collection) { if (ViewData.ModelState.IsValid) { } } 

Currently nothing is displayed in the files signature on the controller. This seems to work fine when working with only one file

 public ActionResult Create(HttpPostedFileBase file, EventsModel collection) 

Can someone point me in a direction that allows you to upload multiple files with one form of submission?

Answer 1

Your problem is that you are creating a send request with information that the middleware can associate because the naming convention is incorrect.

you see, you have 4 file fields, each of which has a different name, so that binding to them correctly binds them, your signature of the controller action should look like this:

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

Following the MCV design pattern, the best option would be to use a ViewModel that contains IEnumerable<HttpPostedFileBase> and you create a custom editor template for IEnumerable<HttpPostedFileBase>

so you can use it like this:

 Html.EditorFor(m=>Model.filesUploaded) 

and the action of your controller will look like this:

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

Other options: Use the HTML5 multiple attribute in the file input field as follows:

 <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 controller actions as follows:

 public ActionResult Create(HttpPostedFileBase files) 

or use several file fields, but index them by 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 can use the controller action as follows:

 public ActionResult Create(IEnumerable<HttpPostedFileBase> files) 

Answer 2

This will only work if there are indexed names in your files, such as files[0] , files[1] , files[2] , ...

To understand how model binding to a list works in asp.net mvc, I recommend that you read this post: model binding to a list

You don’t even need to use model binding to get files. Use Request.Files in your action to get them.

 public ActionResult Create(EventsModel collection) { var files = Request.Files; // rest of the code... } 

Answer 3

 <td> <input type="file" name="files" id="files" multiple="multiple" /> </td> 

As here, I demonstrate with a simple example: http://www.infinetsoft.com/Post/How-to-create-multiple-fileUpload-using-asp-net-MVC-4/1229#.V0J-yfl97IU