Introduction

When Microsoft introduced ASP.NET version 1.0, they added the ability for web applications to upload files from client machines onto the web server. This can be done using the HTML input file server control. This control allows the user to browse for the file to upload.

Now we will add three HTML input file server controls and allow the user to select three files. Upon pressing the Batch Upload button the selected files will be uploaded to the server. From there we will be filtering the uploaded files into two categories:

1. Images
2. Others

We will create two folders inside the root application folder, the first is called "Images" which will be used to save only the images (jpg, gif) being selected by the user and the second is called "Others" which will be used to save all other types of files.

HTML Code

Let's first see how the HTML code of the webform will look like with the three html input file server controls and the three corresponding labels:

The screenshot below demonstrates how the webform will look after we have added the specified controls.

Code Behind

To upload the files to the server we will use the following four system classes.

1. HttpFileCollection
2. HttpPostedFile
3. Request.Files
4. System.IO.Path

The HttpFileCollection class contains a collection of HttpPostedFile. To get the files selected by the user, we will use the Request.Files, which will return a collection of files, and store them inside the HttpFileCollection. The System.IO.Path is used to check the file extension and the filename. We will use the file extension to filter between images and other files types.

As you may have noticed we are looping through each HttpPostedFile in HttpFileCollection, saving the file extension in a variable and the file name in a second variable. Then we are checking for the extension. If it's an image we are using the HttpPostFile.SaveAs() method to save the image inside the "Images" directory and if it is another type of file we are saving it into the "Others" directory.

Next we’ll create a method called ShowMessages which’ll display the status of each file upload:

ShowMessage takes two parameters, the first is a string parameter and the second is an integer related to the index of HttpFileCollection being processed.

This method will be used to display a message beside each HTML input server control to tell the user if the upload succeeded or to display the error message if an error occurred. The below screenshot shows how the messages will be displayed after a successful upload process.

There are two things to take into consideration for this upload process to succeed:

1. You have to modify the maxRequestLength attribute of <httpRuntime> inside the Web.config file in order to be able to upload more than 4 MB size. Remember its value is in KB.
2. Give access to the ASPNET user account to the two folders we have created (Images, Others).

Conclusion

In this article, you saw how powerful the HTML file server control can be. Adding this capability into your web application will give the user the ability to upload multiple files to your web server.

About Haissam Abdul Malak

Haissam Abdul Malak works as senior software developer in CCC. He has been developing web application using ASP.NET technology over the last 3 years. He achieved the Microsoft Certified Application Developer [MCAD] and been certified since 2006. He is a regular contributor on the ASP.NET official f... This author has published 3 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Nice Article	Ramani Sandeep	3/8/2010 4:38 AM
Very good article.. you can also read the article for multiple file upload using jquery here: http://ramanisandeep.wordpress.com/2009/10/28/multiple-file-upload-using-jquery/ Reply | Permanent link
RE: Nice Article	Sonu Kapoor	3/8/2010 8:28 AM
Nice enhancement Ramani. You should have submitted it as an article to DotNetSlackers.com - that way you would have gotten more exposure and the article would be paid as well ;) [MVP since 2005] [MCAD] Webmaster of DotNetSlackers Question or Suggestion? Feel free to ask my any .NET question Our Posting FAQ Reply | Permanent link
good one	Edge Cross	6/27/2010 7:36 AM
i tried this article and it worked for me. but i would like to know if there is a way that the images uploaded with be bind in the database and not in the folder file in server? i also have the same problem as i want to display images in gridview. i am trying some codes right now but every time i upload the images, the last one image uploaded always takes the column, the rest did not.. any advise on this problem? Reply | Permanent link

---

Please login to rate or to leave a comment.