Simply Notes #3: Multiple File Upload in ASP.Net MVC

Here is requirement I tripped into "Give me an option to upload multiple images which blah blah blah". Blah blah part is where it says do not use the easy way like input type multiple.

Below is the POCO for this sample which is the View Model

Checkout the UIHint attribute which will let us use DisplayFor or EditorFor in any of the views

To make this control reusable create a template File.cshtml which is type bound to custom Image type

The jQuery script will copy the input type file element and appends to the last file element whenever a file is selected to upload on the input element.

The Action here is to ModelBind image array to the action parameter

The Bind attribute takes care of the naming convention that takes behind the scenes when rendering the element. If you are using the template to render any element the framework will append the model property names of the nested elements. In this example it will render input element with name="PImage.File".

Finally in the View use the template using EditorFor

Note the enctype = "multipart/form-data" which will let us upload the array of files.
This control now will let user select one file at a time and POST it to the server.