Per HTML5 spec the <input type="file" /> tag allows for multiple files to be picked from a single File upload button. This is actually a very subtle change that's very useful as it makes it much easier to send multiple files to the server without using complex uploader controls.
Please understand though, that even though you can send multiple files using the <input type="file" /> tag, the process of how those files are sent hasn't really changed - there's still no progress information or other hooks that allow you to automatically make for a nicer upload experience without additional libraries or code. For that you will still need some sort of library (I'll post an example in my next blog post using plUpload). All the new features allow for is to make it easier to select multiple images from disk in one operation. Where you might have required many file upload controls before to upload several files, one File control can potentially do the job.
How it works
To create a file input box that allows with multiple file support you can simply do:
<form method="post" enctype="multipart/form-data">
<input type="file" multiple="multiple" name="File1" id="File1" accept="image/*" />
<hr /> <input type="submit" id="btnUpload" value="Upload Images" />
Now when the file open dialog pops up - depending on the browser and whether the browser supports it - you can pick multiple files. Here I'm using Firefox using the thumbnail preview I can easily pick images to upload on a form:
Note that I can select multiple images in the dialog all of which get stored in the file textbox. The UI for this can be different in some browsers. For example Chrome displays 3 files selected as text next to the Browse… button when I choose three rather than showing any files in the textbox.
Most other browsers display the standard file input box and display the multiple filenames as a comma delimited list in the textbox.
Note that you can also specify the accept attribute in the <input> tag, which specifies a mime-type to specify what type of content to allow.Here I'm only allowing images (image/*) and the browser complies by just showing me image files to display. Likewise I could use text/* for all text formats registered on the machine or text/xml to only show XML files (which would include xml,xst,xsd etc.).
Capturing Files on the Server with ASP.NET
When you upload files to an ASP.NET server there are a couple of things to be aware of. When multiple files are uploaded from a single file control, they are assigned the same name. In other words if I select 3 files to upload on the File1 control shown above I get three file form variables named File1.
This means I can't easily retrieve files by their name:
HttpPostedFileBase file = Request.Files["File1"];
because there will be multiple files for a given name. The above only selects the first file.
Instead you can only reliably retrieve files by their index. Below is an example I use in app to capture a number of images uploaded and store them into a database using a business object and EF 4.2.
for (int i = 0; i < Request.Files.Count; i++)
HttpPostedFileBase file = Request.Files[i];
if (file.ContentLength == 0)
if (file.ContentLength > App.Configuration.MaxImageUploadSize)
ErrorDisplay.ShowError("File " + file.FileName + " is too large. Max upload size is: " +
var image = new ClassifiedsBusiness.Image();
var ms = new MemoryStream(16498);
image.Entered = DateTime.Now;
image.EntryId = model.Entry.Id;
image.ContentType = "image/jpeg";
image.ImageData = ms.ToArray();
// resize image if necessary and turn into jpeg
Bitmap bmp = Imaging.ResizeImage(ms.ToArray(), App.Configuration.MaxImageWidth,
ms = new MemoryStream();
image.ImageData = ms.ToArray();
This works great and also allows you to capture input from multiple input controls if you are dealing with browsers that don't support multiple file selections in the file upload control.
The important thing here is that I iterate over the files by index, rather than using a foreach loop over the Request.Files collection. The files collection returns key name strings, rather than the actual files (who thought that was good idea at Microsoft?), and so that isn't going to work since you end up getting multiple keys with the same name. Instead a plain for loop has to be used to loop over all files.
Another Option in ASP.NET MVC
If you're using ASP.NET MVC you can use the code above as well, but you have yet another option to capture multiple uploaded files by using a parameter for your post action method.
public ActionResult Save(HttpPostedFileBase file1)
foreach (var file in file1)
if (file.ContentLength < 0)
// do something with the file
Note that in order for this to work you have to specify each posted file variable individually in the parameter list. This works great if you have a single file upload to deal with. You can also pass this in addition to your main model to separate out a ViewModel and a set of uploaded files:
public ActionResult Edit(EntryViewModel model,HttpPostedFileBase uploadedFile)
You can also make the uploaded files part of the ViewModel itself - just make sure you use the appropriate naming for the variable name in the HTML document (since there's Html.FileFor() extension).
You knew this was coming, right? The feature is really nice, but unfortunately not supported universally yet. Once again Internet Explorer is the problem: No shipping version of Internet Explorer supports multiple file uploads. IE10 supposedly will, but even IE9 does not. All other major browsers - Chrome, Firefox, Safari and Opera - support multi-file uploads in their latest versions.
So how can you handle this? If you need to provide multiple file uploads you can simply add multiple file selection boxes and let people either select multiple files with a single upload file box or use multiples. Alternately you can do some browser detection and if IE is used simply show the extra file upload boxes. It's not ideal, but either one of these approaches makes life easier for folks that use a decent browser and leaves you with a functional interface for those that don't.
Here's a UI I recently built as an alternate uploader with multiple file upload buttons:
I'll be at DevIntersection in Vegas this fall giving sessions on ASP.NET Core with Angular and Localization. Thinking of coming? Use discount code STRAHL and save a few bucks. If you do be sure to stop by and say hello!
Other Posts you might also like