When designing the form for uploading, you can choose from a number of approaches. You can use plain HTML elements. If you know that your users are using browsers that implement the HTML5 file API, you can provide a single file input with the multiple attribute:
<input type="file" name="files" multiple />
This enables multiple file selection, but is not available in Internet Explorer 9 or below. It is available in most other modern browsers. One alternative is to provide a number of inputs for users of IE9 or lower. You can selectively choose to display the single input with the multiple attribute set or multiple individual inputs based on the features supported by the browser. Here's the HTML part, including the form declaration which requires the method to be set to POST and an enctype set to multipart/form-data for file uploading to work:
@using (Html.BeginForm("Multiple", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div id="multiple"> <input type="file" class="multiple" name="files" multiple /> </div> <div id="single"> <input type="file" class="single" name="files" /><br /> <input type="file" class="single" name="files" /><br /> <input type="file" class="single" name="files" /><br /> </div> <button class="btn btn-default">Upload</button> }
And here's the jquery code that switches between the two options:
@section Scripts{ <script type="text/javascript"> $(function () { if(window.FileReader != null){ $('#single').hide(); $('.single').prop('disabled', true); } else { $('#multiple').hide(); $('.multiple').prop('disabled', true); } }); </script> }
Browsers that implement the HTML5 file API include a component called Filereader. If this is null, the browser doesn't provide the required support and the input with the multiple attribute is disabled and hidden.
Files are uploaded to the server in the Request.Files collection, each one of which is mapped to an HttpPostedFileBase object by the default MVC model binder. Therefore, the controller action that is tasked to process the uploaded files needs a parameter that represents a collection of HttpPostedFileBase objects. This can be a property on a model, or a simple List<HttpPosteFileBase>parameter. The following action takes each file and saves it with a new name generated from a Guid to a folder called "uploads":
[HttpPost] public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files) { foreach (var file in files) { if (file != null && file.ContentLength > 0) { file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName))); } } return View(); }
An HttpPostedFileBase collection is created and sized to the number of uploads on a form regardless whether the user populated it, or the number of files uploaded if the multiple attribute approach is used. So when testing to see if a file has been uploaded, you should check to see if it is null before testing to see if the ContentLength is greater than 0. If you prefer to save the files in a database, either as binary data or pointers to files in the file system you can read how to do that from my previous article on file uploading: ASP.NET MVC 5 with EF 6 - Working With Files.
Summary
This brief article shows how to upload multiple files in an ASP.NET MVC application by using only HTML solutions (no Flash). It describes the multiple attribute available as part of HTML5 and shows how to fallback to an alternative solution in the cases where the browser lacks the required support.
