Upload multiple files using the HtmlInputFile control

Total votes: 2
Views: 74,086
Comments: 0
Category: ASP.NET

Please login to rate or to leave a comment.

Upload multiple files using the HtmlInputFile control

Published: 05 Feb 2007
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.

Complete code:

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 the Web.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.

Downloads

MultipleUpload Control Library

About Haissam Abdul Malak

Haissam Abdul Malak works as 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 forums (...

View complete profile

Login

Lost Password?