Multiple File Uploader

• Download source code - 5.93 KB

Introduction

There are many situations when a user wants to allow a user to upload more than one file, and you're stuck with either adding as many file input elements as the number of files you want to upload, or possibly having new ones appear 'magically' through JavaScript.

Background

This article helps in uploading multiple files simultaneously in ASP.NET. This article uses the HTML File Input control and GridView.

Using the code

Using this code doesn't get much simpler, thanks to Microsoft's .NET. The heart of this code is the script which helps to get the FileOpen dialog in ASP.NET.

<script type="text/javascript"  language="javascript">
     
function getFile()
{
   document.getElementById("file1").click();
   
   var file = "";
   
   if(document.getElementById("TextBox1").value == "")
        file = document.getElementById("file1").value; 
   else
        file = document.getElementById("TextBox1").value + "\r\n" + 
               document.getElementById("file1").value;
   document.getElementById("TextBox1").value = file ;
}

</script>

To use this code, just run the web application. Once done, it is easy, just click the Add Files button to start uploading the files along with the details as shown in the GridView.

The code for the Add Files button click is shown below:

protected void Button1_Click(object sender, EventArgs e)
{
    if (TextBox1.Text.Length > 0)
    {
        DataTable dt;
        DataRow dr = null;

        FileInfo fileObj = new FileInfo(TextBox1.Text.Trim());
        long size = fileObj.Length / 1024;
        loggedUser = "Administrator";
        folderPath = System.Web.Hosting.HostingEnvironment.MapPath("~/" + loggedUser);
        System.IO.DirectoryInfo dirObj = new DirectoryInfo(folderPath);

        if (!dirObj.Exists)
            dirObj.Create();

        try
        {
            fileObj.CopyTo(folderPath + "\\" + fileObj.Name);
        }
        catch (Exception ee)
        {
            TextBox1.Text = "";
            string error = ee.Message.ToString();
            Response.Write("<script> window.alert(' File With the " + 
                           "same name already uploaded ')</script>");
            return;
        }

        if (GridView1.Rows.Count == 0)
        {
            dt = new DataTable();
            DataColumn dc1 = new DataColumn("File Name", typeof(string));
            DataColumn dc2 = new DataColumn("File Size", typeof(string));
            dt.Columns.Add(dc1);
            dt.Columns.Add(dc2);
            dr = dt.NewRow();
            dr["File Name"] = TextBox1.Text.ToString().Trim();
            if (size > 0)
                dr["File Size"] = size.ToString() + " KB";
            else
                dr["File Size"] = fileObj.Length.ToString() + " Bytes";

            dt.Rows.Add(dr);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        else
        {
            int count = GridView1.Rows.Count;
            dt = new DataTable();
            DataColumn dc1 = new DataColumn("File Name", typeof(string));
            DataColumn dc2 = new DataColumn("File Size", typeof(string));
            dt.Columns.Add(dc1);
            dt.Columns.Add(dc2);

            for (int i = 0; i < count; i++)
            {
                dr = dt.NewRow();
                dr["File Name"] = GridView1.Rows[i].Cells[1].Text;
                dr["File Size"] = GridView1.Rows[i].Cells[2].Text;
                dt.Rows.Add(dr);
            }

            dr = dt.NewRow();
            dr["File Name"] = TextBox1.Text.ToString().Trim();
            if(size > 0)
                dr["File Size"] = size.ToString() + " KB";
            else
                dr["File Size"] = fileObj.Length.ToString() + " Bytes";

            dt.Rows.Add(dr);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        TextBox1.Text = "";
    }
}

If you wish to delete the file, then just use the delete option in the GridView.

Once all the files to be uploaded are added, you can continue processing the files and upload the files by clicking the Upload Files button. The processing code for the Upload Files button is left as an exercise to the user.

Points of Interest

This article makes use of the HTML File Input control and GridView. It is very simple and easy to work around.

Good luck guys!