Click here to Skip to main content
13,863,336 members
Click here to Skip to main content
Add your own
alternative version


218 bookmarked
Posted 11 Mar 2008
Licenced CPOL

Multiple File Upload User Control

, 28 May 2008
Rate this:
Please Sign up or sign in to vote.
This article describes how to create a file upload user control with events and properties.



As we know, an input file element allows you to select only one file at a time, i.e., you can upload only one file at a time using an input file element. If you want to upload multiple files at a time, then you have to add as many file input elements as the number of files you want to upload. The reason behind this is you can only store the file upload information in an input file element. You can not set the value directly for an input file element programmatically, due to security reasons.

Now, I am going to present here an ASP.NET User Control that can be used to upload multiple files at once. I have named it ‘Multiple File Upload User Control’. This doesn’t mean that this user control can upload multiple files using a single file input element. Actually, in this control, an input file element gets hidden after selecting a file, and a new file input element is added in its place. Now, since this phenomenon happens so quickly, it'd seem that there is only one file input element. Hiding a selected file input element and creating a new file input element is done using JavaScript.

Appearance of the User Control

This user control consists of an input file element, a ListBox and three Buttons. A brief description of each is given below:


  • Input file element: Used to select a file.
  • ListBox: Used to display the selected files.
  • Add button: Used to add a selected file into the ListBox.
  • Clear button: Used to remove all selected files from the ListBox.
  • Upload button: Used to upload all the selected files to the server.
  • Delete link: This appears at the right hand side of the each selected file. By clicking on it, you can remove it from selected files list.

Properties of the User Control

This User Control has two public properties.

  • Rows: Used to set/get the number of visible rows to display. The default value for this is 6.
  • UpperLimit: Used to set/get the maximum number of files to upload.

Events of the User Control

This User Control has only one server-side event.

  • Click: Fires when the upload button is clicked. The delegate that represents the Click event signature for the MultipleFileUpload control is given below:
public delegate void MultipleFileUploadClick(object sender, FileCollectionEventArgs e)

I will discuss about it later. The second argument is a FileCollectionEventArgs class that gives useful information about the posted files. This class has following readonly public properties:

  • PostedFiles: Gives the HttpFileCollection of all posted files.
  • Count: Gives the total number of posted files.
  • HasFiles: Gets the value indicating whether this user control contains any posted file or not.
  • TotalSize: Gives the total size in KB of all posted files.

Using the User Control

Drag and drop the user control into an ASPX page and set values for the Rows and UpperLimit properties. The HTML code for this user control looks like:

<uc1:MultipleFileUpload ID="MultipleFileUpload1" runat="server" UpperLimit="4" Rows="6" />

Next, create an event handler for the Click event for this user control:

protected void MultipleFileUpload1_Click(object sender, FileCollectionEventArgs e)

Now, wire up the event handler in the control tag by adding the prefix On in front of the event name. Now, the HTML code will look like:

<uc1:MultipleFileUpload ID="MultipleFileUpload1" OnClick="MultipleFileUpload1_Click"

                        runat="server" UpperLimit="4" Rows="6" />

Uploading the Posted Files using the User Control

Finally, select the necessary files and click on the Upload button of the user control to upload the posted files. The code for uploading the posted files is given below:

protected void MultipleFileUpload1_Click(object sender, FileCollectionEventArgs e)
   HttpFileCollection oHttpFileCollection = e.PostedFiles;
   HttpPostedFile oHttpPostedFile = null;
   if (e.HasFiles)
      for (int n = 0; n < e.Count; n++)
         oHttpPostedFile = oHttpFileCollection[n];
         if (oHttpPostedFile.ContentLength <= 0)
            oHttpPostedFile.SaveAs(Server.MapPath("Files") + "\\" + 

The above code is straightforward and self-explanatory.

User Control HTML

The HTML of this user control is very simple.

<asp:Panel ID="pnlParent" runat="server" Width="300px" 

           BorderColor="Black" BorderWidth="1px" BorderStyle="Solid">
   <asp:Panel ID="pnlFiles" runat="server" Width="300px" HorizontalAlign="Left">
      <asp:FileUpload ID="IpFile" runat="server" />
   <asp:Panel ID="pnlListBox" runat="server" Width="292px" BorderStyle="Inset">
   <asp:Panel ID="pnlButton" runat="server" Width="300px" HorizontalAlign="Right">
      <input id="btnAdd" onclick="javascript:Add();" 

             style="width: 60px" type="button" runat="server" value="Add"/>
      <input id="btnClear" onclick="javascript:Clear();" 

             style="width: 60px" type="button" value="Clear" runat="server"/>
      <asp:Button ID="btnUpload" OnClientClick="javascript:return DisableTop();" 

           runat="server" Text="Upload" Width="60px" OnClick="btnUpload_Click"/>
      <br />
      <asp:Label ID="lblCaption" runat="server" Font-Bold="True" 

           Font-Names="Verdana" Font-Size="XX-Small" ForeColor="Gray">

There are three Panels in this user control. The file panel [ID="pnlFiles"] is for the input file elements, the ListBox panel [ID="pnlListBox"] is for listing the selected files and the Button panel [ID="pnlButton"] has three buttons: two for the client side events and one for the server side. Both the Add button [id="btnAdd"] and the Clear button [id="btnClear"] have client-side onclick events. The server side button [ID="btnUpload"] has a client side OnClientClick event as well as a server side OnClick event. The Label [ID="lblCaption"] is used here to display the upper limit for this user control.

I have used the FileUpload control [ID="IpFile"] of ASP.NET 2.0 in the File panel instead of using an input file element. The reason behind this is it automatically adds enctype="multipart/form-data" to the page's <form> element.

User Control Code

The user control class has following definition for its Click event.:

public event MultipleFileUploadClick Click;

The delegate that represents the Click event signature is given below:

public delegate void MultipleFileUploadClick(object sender, FileCollectionEventArgs e);

FileCollectionEventArgs is an event argument class that contains the basic information about the posted files. I will discuss it later. The Click event for this user control is fired in the click event of the Upload button.

protected void btnUpload_Click(object sender, EventArgs e)
   // Fire the event.
   Click(this, new FileCollectionEventArgs(this.Request));

The user control class has a private method GetJavaScript(). This method generates the necessary client side JavaScript for this user control. This is registered in Page_Load event of the user control using the RegisterStartupScript method.

Now, let's discuss the FileCollectionEventArgs class that represents the second argument of the Click event.

public class FileCollectionEventArgs : EventArgs
    private HttpRequest _HttpRequest;
    public HttpFileCollection PostedFiles
            return _HttpRequest.Files;
    public int Count
        get { return _HttpRequest.Files.Count; }
    public bool HasFiles
        get { return _HttpRequest.Files.Count > 0 ? true : false; }
    public double TotalSize
            double Size = 0D;
            for (int n = 0; n < _HttpRequest.Files.Count; ++n)
                if (_HttpRequest.Files[n].ContentLength < 0)
                    Size += _HttpRequest.Files[n].ContentLength;
            return Math.Round(Size / 1024D, 2);
    public FileCollectionEventArgs(HttpRequest oHttpRequest)
        _HttpRequest = oHttpRequest;

The FileCollectionEventArgs class is derived form the EventArgs base class. The constructor for the FileCollectionEventArgs class takes an HttpRequest object as an argument. The FileCollectionEventArgs class has four public properties as discussed earlier. The files property of the HttpRequest class has all the posted files as a HttpFileCollection class. The rest of the properties are easy to understand.


The maximum size that can be uploaded to the server using this user control is around 4MB, i.e., the sum of sizes of all the files to be uploaded should be less than 4MB. You can not upload anything that is larger than 4MB. If you want to upload more than 4MB, then you have to make some changes in the web.config file; e.g., if you want to upload around 10MB, then make the following change in the <httpRuntime> node of the system.web section of the web.config file.

<httpRuntime maxRequestLength="102400" executionTimeout="275"/> 

You can find more information regarding this on the MSDN website [^].


I have tried my best to make this user control code error free. I will most welcome suggestions for further improvement in this user control. I have tested this user control on various browsers and it works fine. The list of browsers along with versions is given below:



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


You may also be interested in...


Comments and Discussions

QuestionWhere's my "clap" button? Pin
MaxGuernsey17-Mar-08 19:48
memberMaxGuernsey17-Mar-08 19:48 
AnswerRe: Where's my "clap" button? Pin
Samir NIGAM21-May-08 18:54
memberSamir NIGAM21-May-08 18:54 
GeneralYet another Code !!!! [modified] Pin
Ranjan.D11-Mar-08 21:43
professionalRanjan.D11-Mar-08 21:43 
GeneralRe: Yet another Code !!!! Pin
Samir NIGAM21-May-08 18:54
memberSamir NIGAM21-May-08 18:54 
GeneralGreat Article Pin
Sandeep Shekhar11-Mar-08 21:15
memberSandeep Shekhar11-Mar-08 21:15 
GeneralRe: Great Article Pin
Samir NIGAM21-May-08 18:53
memberSamir NIGAM21-May-08 18:53 
GeneralGood solution to a common problem I'm sure Pin
Ben Daniel11-Mar-08 21:00
memberBen Daniel11-Mar-08 21:00 
GeneralRe: Good solution to a common problem I'm sure Pin
Samir NIGAM21-May-08 18:53
memberSamir NIGAM21-May-08 18:53 
GeneralReally Nice Work Pin
Dileep.M11-Mar-08 20:56
memberDileep.M11-Mar-08 20:56 
GeneralRe: Really Nice Work Pin
Samir NIGAM21-May-08 18:53
memberSamir NIGAM21-May-08 18:53 
Generalmost valuable article Pin
san_geit11-Mar-08 19:41
membersan_geit11-Mar-08 19:41 
GeneralRe: most valuable article Pin
Samir NIGAM21-May-08 18:52
memberSamir NIGAM21-May-08 18:52 
GeneralReally Very Very Impressive Pin
MCSDvikasmisra11-Mar-08 19:15
memberMCSDvikasmisra11-Mar-08 19:15 
GeneralRe: Really Very Very Impressive Pin
Samir NIGAM21-May-08 18:52
memberSamir NIGAM21-May-08 18:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 28 May 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid