Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

MultifileUploadUserControl.gif

Introduction

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:

Description1.png

  • 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)
            continue;
         else
            oHttpPostedFile.SaveAs(Server.MapPath("Files") + "\\" + 
               System.IO.Path.GetFileName(oHttpPostedFile.FileName));
      }
   }
}

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>
   <asp:Panel ID="pnlListBox" runat="server" Width="292px" BorderStyle="Inset">
   </asp:Panel>
   <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">
      </asp:Label> 
   </asp:Panel>
</asp:Panel>

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
    {
        get
        {
            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
    {
        get
        {
            double Size = 0D;
            for (int n = 0; n < _HttpRequest.Files.Count; ++n)
            {
                if (_HttpRequest.Files[n].ContentLength < 0)
                    continue;
                else
                    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.

Limitations

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 [^].

Conclusion

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:

Browsers.png

License

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

Share

About the Author

Samir NIGAM
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,.

Awards:


Comments and Discussions

 
GeneralRe: Error : Object reference not set to an instance of an object. Pinmemberbhavik.vaishnani22-Sep-13 7:03 
GeneralNice Article Pinmemberdennisjose19-Apr-10 0:56 
GeneralNice Article PinmemberAnurag Gandhi16-Feb-10 3:00 
GeneralRe: Nice Article PinmemberSamir NIGAM21-Feb-10 21:28 
QuestionHow to Implement this User Control with One File PinmemberHamed Bagherzadeh16-Jan-10 23:20 
QuestionIs It Possible To Use Validation Controls On This [modified] PinmemberNuNn18-Nov-09 5:53 
GeneralCool PinmemberHighCommand9-Nov-09 23:04 
GeneralUsing the Control in a ModalPopUpExtender Pinmemberthegameplays20-Oct-09 3:36 
Hello,
 
When I try to use the user control in the ModalPopUpBoxExtender, it does not work.
 
In the sense, the file content length in the Button click event on the aspx page shows -2.
 
I would appreciate, if anyone could help me out in this regard.
QuestionHow do you resize the File Input (IpFile) control length? Pinmemberbooth_troy23-Sep-09 8:54 
QuestionRe: How do you resize the File Input (IpFile) control length? Pinmemberbooth_troy24-Sep-09 1:30 
AnswerRe: How do you resize the File Input (IpFile) control length? Pinmembergabi_rpg@yahoo.com6-Apr-10 3:39 
QuestionAdding File is not working PinmemberNoor Fazli10-Jul-09 10:10 
Generalmultiple file upload Pinmembersundermagar17-Jun-09 17:43 
GeneralRe: multiple file upload PinmvpSamir NIGAM17-Jun-09 19:31 
QuestionHow to upload the multiple file upload user control source code? PinmemberVictorVu23-Apr-09 3:48 
QuestionAdd files from Server PinmemberNitinRaj14-Apr-09 0:43 
QuestionHow to implement in VB project PinmemberElias Sader25-Feb-09 21:46 
QuestionWhy i get error message? PinmemberSteammike4-Feb-09 19:53 
AnswerRe: Why i get error message? PinmemberMember 359855123-Nov-09 8:23 
GeneralPerfect Pinmemberitskrishnan2-Jan-09 21:51 
GeneralRe: Perfect PinmemberSameer NIGAM3-Jan-09 0:30 
GeneralMy vote of 1 Pinmembergllgsoft24-Dec-08 20:06 
AnswerAbout this control PinmemberMember 415826612-Nov-08 15:07 
Questionuploading file more than 3 ? PinmemberMember 412549925-Oct-08 1:38 
AnswerRe: uploading file more than 3 ? PinmemberSameer NIGAM30-Oct-08 4:04 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 28 May 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid