ASP.NET Multiple File Uploader

Introduction

There are many situations when a developer wants to allow a user to upload more than one file. Currently you may be 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.

This article helps in uploading multiple files simultaneously in ASP.Net by using an HTML file Input Control and the Grid View. Using the code provided and .NET, this doesn't get much easier.

The heart of this article is the script which helps to get the FileOpen Dialog in ASP.Net. To use this article simply run the web application. Once done it is easy to click the "Add Files" Button to start uploading the files along with the details shown in the Grid View.

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(" "); 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 simply use the delete option in the Grid View. Once all the files to be uploaded are added, you can continue processing the files and upload them by clicking the Upload Files button. The processing code for Upload Files button is left to the user. Point of interest, this article makes use of HTML file Input Control and Grid View. Its very simple and easy to work around.