Published: 05 Feb 2006
By: Haissam Abdul Malak
In this article, Haissam Abdul Malak will explain how to upload multiple files using several file upload controls. This article will demonstrates how to create a webform with three HtmlInputFile
controls which will allow the user to upload three files at a time.
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:
- Images
- 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:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="MultipleUpload.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 280px; POSITION: absolute; TOP: 101px" runat="server" Text="Batch Upload" /> <div id="Div1" runat="server" style="Z-INDEX:102;LEFT:165px;WIDTH:1026px; POSITION:absolute;TOP:7px;HEIGHT:19px"> <INPUT id="FileUpload1" style="WIDTH: 389px; HEIGHT: 22px" type="file" size="45" runat="server"> <asp:Label id="Label1" runat="server" Width="598px" ForeColor="Red" /> </div> <div id="Div2" runat="server" style="Z-INDEX:103;LEFT:166px;WIDTH:1026px; POSITION:absolute;TOP:38px;HEIGHT:19px"> <INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file" size="45" runat="server" id="FileUpload2"> <asp:Label id="Label2" runat="server" Width="357px" ForeColor="Red" /> </div> <div id="Div3" runat="server" style="Z-INDEX:104;LEFT:166px;WIDTH:1026px; POSITION:absolute;TOP:68px;HEIGHT:19px"> <INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file" size="45" runat="server" id="FileUpload3"> <asp:Label id="Label3" runat="server" Width="361px" ForeColor="Red" /> </div> </form> </body> </HTML>
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.
- HttpFileCollection
- HttpPostedFile
- Request.Files
- 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.
HttpFileCollection uploadFilCol = Request.Files; for(int i=0;i<uploadFilCol.Count;i++) { HttpPostedFile file = uploadFilCol[i]; string fileExt = Path.GetExtension(file.FileName).ToLower(); string fileName = Path.GetFileName(file.FileName); if(fileName != string.Empty) { try { if(fileExt == ".jpg" || fileExt == ".gif") { file.SaveAs(Server.MapPath("./Images/") + fileName); } else { file.SaveAs(Server.MapPath("./Others/") + fileName); } } catch(Exception ex) { throw ex; } } }
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:
private void ShowMessage(string message, int fileUploadPos ) { if(fileUploadPos ==0) { Label1.Text = message; } else { if(fileUploadPos ==1) { Label2.Text = message; } else { Label3.Text = message; } } }
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.
HttpFileCollection uploadFilCol = Request.Files; for(int i=0;i<uploadFilCol.Count;i++) { HttpPostedFile file = uploadFilCol[i]; string fileExt = Path.GetExtension(file.FileName).ToLower(); string fileName = Path.GetFileName(file.FileName); if(fileName != string.Empty) { try { if(fileExt == ".jpg" || fileExt == ".gif") { file.SaveAs(Server.MapPath("./Images/") + fileName); this.ShowMessage(" " + fileName + " Successfully Uploaded",i); } else { file.SaveAs(Server.MapPath("./Others/") + fileName); this.ShowMessage(" " + fileName + " Successfully Uploaded",i); } } catch(Exception ex) { this.ShowMessage(" " + ex.Message, i); } } }
There are two things to take into consideration for this upload process to succeed:
- You have to modify the
maxRequestLength
attribute of<httpRuntime>
inside theWeb.config
file in order to be able to upload more than 4 MB size. Remember its value is in KB. - 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.