Upload Multiple Files Using FileUpload Control In ASP.NET 4.5

Gaurav Gupta

ASP.NET 4.5 FileUpload ControlFileUpload Control in ASP.NET 4.5Upload Multiple files

15 Comments

Join the conversation! Your thoughts help the community grow.

Marwa Youssef5y ago
What about the error ( foreach can't operate on a variables of type System.Web.HttpPostedFile doesn't contain a puplic definition for " GetEnumerator"
tank taeyang6y ago
If want to delete certain file?
sachin thorkar8y ago
Is it possible to show selected files before uploading?
Ratheesh Palani9y ago
One error from the line uploadimages.postedFiles foreach(HttpPostedFile uploadedFile in UploadImages.PostedFiles) and the error is......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?
- Inżynier Umair9y ago
  I think foreach loop works with ToList() method, something like ToList().foreach(..)... !
احمد البقرى10y ago
what about this problem Error 1 '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?)
Kev Patil10y ago
Is it possible to show selected files before uploading?
hothorasman panjaitan11y ago
how displays multi upload pdf files in a single row gridview
hothorasman panjaitan11y ago
how to bind gridview multiiupload one colomn in gridview
Rajeesh Menoth11y ago
hai sir,how to delete those uploaded file individually??
Saber Shaikh12y ago
Very Use Full
neethu12y ago
How to do this in ASP.NET 3.5
- Gaurav Gupta12y ago
  This is the feature in 4.5.
ketan italiya13y ago
thanks,sir
Vithal Wadje13y ago
good one sir

ASP.NET 4.5 brings many new desirable features to upgrade the functionality of previous versions.

Here I will discuss with you one of them, the feature of new the FileUpload control in ASP.NET 4.5. The FileUpload control in ASP.NET extends it's functionality by supporting the upload of multiple files at once.

Prior to this latest version, the FileUpload control only supported a single file at a time, but version ASP.NET version 4.5 solves this issue very well.

Now, the FileUpload control is built to support HTML 5, therefore it is only supported in browsers supporting HTML5. For other browsers it will work like a normal file upload control in ASP.NET.

A new attribute that comes with the ASP.NET 4.5 FileUplaod control is that,

AllowMultiple

It takes either true or false.

In order to support multiple file uploads, set AllowMulitple="true" other than false.

This attribute is for the browsers that support multiple files to be uploaded and for this purpose it renders the necessary HTML5 attribute.

In addition to this control, some new properties have been included to support code-behind coding.

HasFiles

Check whether FileUpload control has multiple files or not.

PostedFiles

Basically used to get all the files from the FileUpload control in the iteration.

Both properties will help to work with the mulitple selected files in Code-Behind coding (C#).

After the preceding overview of the theory, let's proceed to implement this cool feature in an application.

First, in the ASPX page declare a FileUpload control.

Remember: Set the AllowMultiple attribute to "true" to enable the multiple file upload feature.

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

Now, the following HTML is rendered in the browser,

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

The AllowMultiple attribute renders multiple attributes in the HTML 5.

The complete code for .aspx file will looks like,

<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>

You will see that I have attached a button's click event. So, now start to write C# for this.

In the following code I will use HasFiles and PostedFiles properties that we will see in the preceding section.

protected void uploadFile_Click(object sender, EventArgs e) {
if (UploadImages.HasFiles) {
foreach(HttpPostedFile uploadedFile in UploadImages.PostedFiles) {
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}

In the code above I have saved each image in the Images folder of the web application from the PostedFiles collection.

Now, run the application and see the output.

file-uplaod-control-in-asp.net4.5.jpg

Select multiple files and click on the Upload button and it will show you the list of files that have been uploaded.

multifile-uplaod-in-asp.net4.5.jpg