Uploading Multiple Files at Once using ASP.NET 4.5

In versions of ASP.NET before 4.5 there was no direct way to enable a user to upload multiple files at once. The FileUpload control only supported a single file at the time. Common solutions to uploading multiple files were to use a server-side control such as those from Telerik or DevExpress or to use a client-side solution using a jQuery plugin for example. In the latter case, you would access Request.Files to get at the uploaded files, rather than retrieving them form a FileUpload control directly. Fortunately, in ASP.NET 4.5 uploading multiple files is now really easy.

The FileUpload Control with HTML5 Support

The FileUpload control has been enhanced in ASP.NET to support the HTML5 multiple attribute on an input with its type set to file. The server control has been expanded with an AllowMultiple attribute that renders the necessary HTML5 attribute. In addition, the control now has properties such as HasFiles and PostedFiles that enable you to work with a collection of uploaded files, rather than with just a single file as was the case with previous versions of the control.

All you need to do to enable multiple file uploads is set the AllowMultiple property of the FileUpload control to true:

<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />

In the browser, this renders the following HTML:

<input type="file" multiple="multiple" name="FileUpload1" id="FileUpload1" />

Notice how the multiple="multiple" attribute tells the browser to enable support for multiple files. Each browser that supports this feature uses a slight different interface. For example, in Chrome it looks like this:

Chrome showing Multiple File Uploads

while in Opera it looks like this:

Opera showing Multiple File Uploads

All major browsers (Firefox, Chrome, Opera and Safari) except Internet Explorer 9 support this feature. IE 10 will support uploading multiple files as well, so hopefully this limitation is soon a thing of the past. While Safari seems to officially support this feature, I couldn't make the example work with multiple files. This could be a bug in Safari.

Working with the uploaded files at the server is similar to how you used to work with the control, except that you now work with a collection of files, rather than with a single instance. The following code snippet demonstrates how to save the uploaded files to disk and assign their names to a simple Label control, reporting back to the user which files were uploaded:

protected void Upload_Click(object sender, EventArgs e)
{
  if (FileUpload1.HasFiles)
  {
    string rootPath = Server.MapPath("~/App_Data/");
    foreach (HttpPostedFile file in FileUpload1.PostedFiles)
    {
      file.SaveAs(Path.Combine(rootPath, file.FileName));
      Label1.Text += String.Format("{0}<br />", file.FileName);
    }
  }
}

With this code, each uploaded file is saved in the App_Data folder in the root of the web site. Notice that this is just a simple example, and you would still need to write code you normally would to prevent existing files from being overwritten, and to block specific files types from being uploaded.

Downloads

Source of a simple demo site showing the FileUpload control (requires ASP.NET 4.5)


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Saturday, November 10, 2012 10:19:44 PM Jamal MELLAl said:
Hi,
Thanks this is great but the problem is that the multiple selection is not working withe IE (internet Explorer)

How can we resole this issue ?

Thanks again
On Saturday, November 10, 2012 11:08:04 PM Imar Spaanjaars said:
Hi Jamal,

You can wait for IE 10 :-;

You can also look at (commercial) components such as those from DevExpress or Telerik that mimic this behavior. There are also Flash or Java based components available that let you upload multiple files. Google knows more...

Cheers,

Imar
On Wednesday, December 26, 2012 7:31:48 AM ziauddin said:
this is good post.
but how to resolve this multiple selection with IE.
On Wednesday, December 26, 2012 12:50:03 PM Imar Spaanjaars said:
Hi ziauddin,

Did you read the answer I gave to Jamal? Any reason why this wouldn't apply to you?

Imar
On Wednesday, December 26, 2012 1:35:29 PM ziauddin said:
ok thanks
if i want to add the documents to document library of sharepoint?
any idea please.


thanks
On Wednesday, December 26, 2012 3:04:05 PM Imar Spaanjaars said:
Heuh? I don't see how this is related....

Imar
On Thursday, December 27, 2012 9:30:24 AM ziauddin said:
Hi,
any example how to use multiple file upload uisng dev express.



thanks
On Thursday, December 27, 2012 12:36:17 PM Imar Spaanjaars said:
Same answer: how is this related to the original topic of the article? Why don't you check the Dev Express documentation?

Imar
On Tuesday, January 22, 2013 2:20:57 PM Matthew said:
Thanks for this. I have just started building a new Web App in .Net 4.5 and was looking for a better way then mutiple inputs to allow file uploads and this looks to be the perfect solution.
On Tuesday, April 23, 2013 8:29:01 AM KUMS said:
Error 3 'System.Web.UI.WebControls.FileUpload' does not contain a definition for 'HasFiles' and no extension method 'HasFiles' accepting a first argument of type 'System.Web.UI.WebControls.FileUpload' could be found (are you missing a using directive or an assembly reference?) E:\Reference\Reference website1\Default.aspx.cs 11 21 E:\Reference\Reference website1\
Error 4 'System.Web.UI.WebControls.FileUpload' does not contain a definition for 'PostedFiles' and no extension method 'PostedFiles' accepting a first argument of type 'System.Web.UI.WebControls.FileUpload' could be found (are you missing a using directive or an assembly reference?) E:\Reference\Reference website1\Default.aspx.cs 14 51 E:\Reference\Reference website1\
On Tuesday, April 23, 2013 8:31:50 AM Imar Spaanjaars said:
And the question is? How about some relevant background?

Imar
On Tuesday, May 14, 2013 11:14:01 AM cheta said:
Multiple selection is not working in any version of IE including IE10 when its been hosted on IIS server.
On Tuesday, May 14, 2013 11:42:18 AM Imar Spaanjaars said:
Hi cheta,

I just tested it on IE 10 on Win 8 using IIS and it works fine. Can you define "is not working"? What problems are you running into?

Imar
On Tuesday, May 14, 2013 11:50:02 AM Cheta said:
Thank you so much for the reply but I am using windows7..Hosting on IIS version 7.5..Its working fine with Chrome but not on IE10
On Tuesday, May 14, 2013 7:30:07 PM Imar Spaanjaars said:
Haven't tried it on Win7; it may not be supported there....

Imar
On Wednesday, May 15, 2013 3:13:55 AM cheta said:
I will have to use multiple file upload at a time with asking user name of file, then rename the file and save to different location..so in asp.net code I've better control in all such things.. any another option you can suggest?
On Wednesday, May 15, 2013 9:52:54 AM Imar Spaanjaars said:
Hi there,

You can look into commercial components such as those from devexpress.com as they generally support more browsers for stuff like multi-fileuploads.

Cheers,

Imar
On Saturday, November 23, 2013 7:31:19 PM subho said:
http://dotnetawesome.blogspot.com/2013/11/how-to-upload-multiple-file-with.html
On Wednesday, October 01, 2014 9:45:50 AM SHISH said:
HI,
The component works well on my local machine. When i deploy it on the server i cannot select multiple files.
Can you help me out on this
Regards
SHISH
On Wednesday, October 01, 2014 2:26:01 PM Imar Spaanjaars said:
Hi there,

Are you sure your server is running ASP.NET 4.5 and that the browser you test it on supports multiple file uploads?

Imar
On Thursday, January 19, 2017 6:33:24 AM Niraj Patel said:
This component is working fine on my local machine.  It is also working on IIS 7.  But When I am deploying it on IIS 7.5 it is not working.  It is not allowing me to select multiple files.

On IIS 7 it render as

input type="file" multiple="multiple" name="FileUpload" id="FileUpload"

And on IIS 7.5 it render as

input type="file" name="FileUpload" id="FileUpload" allowmultiple="true"


Please help me on this.  
On Thursday, January 19, 2017 7:38:55 AM Imar Spaanjaars said:
Hi Niraj,

See my previous answer: make sure you have the proper ASP.NET version installed on the server.

Cheers,

Imar
On Thursday, January 19, 2017 8:32:23 AM Niraj Patel said:
My Whole website is working fine.  But File upload dialog box is not allowing to select multiple files.

And If I deploy it on windows server 2008 with IIS 7.0.  Multiple File upload functionality also working fine.

Problem is with windows server 2008 R2 and IIS 7.5
On Thursday, January 19, 2017 8:36:07 AM Imar Spaanjaars said:
We're going round in circles. Did you check the ASP.NET version installed on the server?

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.