Bulk Uploader in ASP.NET 2.0

The FileUpLoad control enables you to upload file to the server. It displays a text box control and a browse button that allow users to select a file to upload to the server.


In my previous article I had made use of <INPUT id="fileUpload" type="file" Runat="server" NAME="fileUpload"> to upload file, in asp.net we have new server side control called as "FileUpload control"

The FileUpload control does not automatically save a file to the server after the user selects the file to upload. You must explicitly provide a control or mechanism to allow the user to submit the specified file.

Uploading single file functionality at a time to the server this functionality we have already achieved in the earlier article.

Here I am going to display small code snippet by using which you can upload multiple files at a time.

The idea is you can select files from your folders and keep on adding to listbox and in one shot you can upload all the files I have provided functionalities like "Add", "Remove" & "Upload", technically speaking I am adding to the static arraylist and considering each array element as System.Web.UI.WebControls.FileUpload , while uploading just iterate through each webcontrol and SaveAs file to the specified location.

Note: To upload any of the file in respective folder user need to have permission for writing to the folder so please follow the following steps to prevent from the error.

Set permission to virtual directory by following steps in IIS:

Right Click on virtual directory which you have created for this project. Under directory Tab you will find :

  1. Read.
  2. Log Visits.

Index this resources are marked as checked (enables) in addition to this make:

Write access enabled or checked. -> Click on Apply. -> Click on OK.

Code for uploader.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Uploader.ascx.cs" Inherits="Uploader" %>

<table>

    <tr>

        <td style="width: 163px">

            <span style="font-size: 10pt; font-family: Verdana"><strong>

            Select file to upload:</strong></span></td>

        <td style="width: 324px">

            <asp:FileUpload ID="fUpload" runat="server" />&nbsp;<asp:Button ID="btnAdd" runat="server" Text="Add"

              OnClick="btnAdd_Click" /></td>

    </tr>

    <tr>

        <td style="width: 163px">

        </td>

        <td style="width: 324px">

            <asp:ListBox ID="lstFiles" runat="server" Width="324px"></asp:ListBox>

            </td>

    </tr>

    <tr>

        <td style="width: 163px">

        </td>

        <td style="width: 324px">

            <asp:Button ID="btnRemove" runat="server" Text="Remove" OnClick="btnRemove_Click" />

            &nbsp;<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /></td>

    </tr>

    <tr>

        <td colspan="2">

            <asp:Label ID="lblMessage" runat="server" Font-Names="Verdana" Font-Size="Small"

              ForeColor="Red"></asp:Label></td>

    </tr>

</table> 

Code for uploader.ascx.cs:

//General declerations   

protected static ArrayList arrFiles = new ArrayList(); // has to be static since Adding and then reusing

protected int isUploaded = 0;   

protected string pathToUpload = HttpContext.Current.Server.MapPath("UploadedFiles");

 

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnAdd_Click(object sender, EventArgs e)

{

    //Functionality to add the item in the list

    //At very first add to the array list & simultanously display in the listbox

    try

    {

        if (Page.IsPostBack)

        {

            arrFiles.Add(fUpload);

            lstFiles.Items.Add(fUpload.PostedFile.FileName);

        }

    }

    catch (Exception ex)

    {

        lblMessage.Text = "An error has occured while adding file"+ex.Message;

    }

}

protected void btnRemove_Click(object sender, EventArgs e)

{

    //Functionality to remove files

    //Veryfirst you have to remove from the arraylist and similarly from the listbox

    if (lstFiles.Items.Count != 0)

    {

        arrFiles.Remove(fUpload);

        lstFiles.Items.Remove(lstFiles.SelectedItem.Text);

    }

}

protected void btnUpload_Click(object sender, EventArgs e)

{

    //Very first check if the files are present to upload or Selected to upload

    if ((lstFiles.Items.Count == 0) && (isUploaded == 0))

    {

        lblMessage.Text = "Please specify file name";

    }

    else

    {

        //Take every element from the arraylist as HTMLInputFile, iterate through

        //each InputFile and upload the files to the specified location           

        foreach (System.Web.UI.WebControls.FileUpload Ipf in arrFiles)

        {

            try

            {

                string strFileName = System.IO.Path.GetFileName(Ipf.PostedFile.FileName);

                Ipf.PostedFile.SaveAs(pathToUpload + "\\" + strFileName);

                isUploaded = isUploaded + 1;                   

            }

            catch(Exception ex)

            {

                lblMessage.Text = "An error has occured while uploading your files:<br>"+ex.Message;

            }

        }

        if (isUploaded == arrFiles.Count)

        {

            lblMessage.Text = "Files uploaded successfully";

        }

        //Empty the arraylist and listbox once the upload process finishes

        arrFiles.Clear();

        lstFiles.Items.Clear();

    }

}

Accessing Code on Default.aspx page:

<%@  Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="Bulk" TagName="Uploader" Src="Uploader.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Bulk Uploader</title>

</head>

<body>

    <form id="attachme" method="post" enctype="multipart/form-data" runat="server">

        <div>

            <h3>

                Bulk Files Uploader Utility:</h3>

            <Bulk:Uploader runat="server" id="Uploader1">

            </Bulk:Uploader>

        </div>

    </form>

</body>

</html>