7/28/2019 Uploading Multiple Files at Once Using ASP.net 4

1/2

6/20/13 Uploading Multiple Files at Once using ASP.NET 4.5

imar.spaanjaars.com/567/uploading-multiple-files-at-once-using-aspnet-45 1/2

Uploading Multiple Files at Once using ASP.NET 4.5In versions of ASP.NET before 4.5 there was no direct way to enable a user to upload multiple files at once. TheFileUpload 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 (1) or DevExpress (2) or to use a client-side solutionusing 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 SupportThe 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 casewith 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:

In the browser, this renders the following HTML:

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 C hrome it looks like this:

while in Opera it looks like this:

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

Working with the uploaded files at the server is similar to how you used to work with the control, except thatyou now work with a collection of files, rather than with a single instance. The following code snippetdemonstrates 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)

{

http://demos.telerik.com/aspnet-ajax/upload/examples/overview/defaultcs.aspxhttp://www.devexpress.com/Products/NET/Controls/ASP/#main|controlshttp://www.devexpress.com/Products/NET/Controls/ASP/#main|controlshttp://demos.telerik.com/aspnet-ajax/upload/examples/overview/defaultcs.aspx

7/28/2019 Uploading Multiple Files at Once Using ASP.net 4

2/2

6/20/13 Uploading Multiple Files at Once using ASP.NET 4.5

imar.spaanjaars.com/567/uploading-multiple-files-at-once-using-aspnet-45 2/2

file.SaveAs(Path.Combine(rootPath, file.FileName));

Label1.Text += String.Format("{0}
", 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 frombeing overwritten, and to block specific files types from being uploaded.

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

Links in this Document(1) http://demos.telerik.com/aspnet-ajax/upload/examples/overview/defaultcs.aspx(2) http://www.devexpress.com/Products/NET/Controls/ASP/#main|controls

QuickDocId 567

Full URL http://imar.spaanjaars.com/567/uploading-multiple-files-at-once-using-aspnet-45

Short cut http://imar.spaanjaars.com/567/

Written by Spaanjaars.Imar.Model.ContentSummary.CreateAuthorName

Date Posted 04/08/2012 11:14

http://imar.spaanjaars.com/Downloads/Articles/MultipleFileUploads/MultipleFileUploads.zip