Click here to Skip to main content
Click here to Skip to main content

Multiple File Uploader

, 28 Sep 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This article will help in uploading multiple files in an ASP.NET Web Application.

Screenshot - MultiFile_Uploader_640_X_800.jpg

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!

License

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

Share

About the Author

Govardhana Reddy
Web Developer India
India India
This is Govardhana Reddy, i am here to explore this world of INTERNET. I feel this is one way through which i can explore this world of INTERNET.
 
I want to be one among the best in this profession (a Software Developer, not a Software Engineer its a bit Controversial.) if not the "BEST"
 
My definition of a Software Engineer : "A person who knows what to cut/copy and where to paste".
 
Apart from my technical stuff I love Long Drives, Computer Gaming, Sports, Bikes and much more to say.
 
Anyways long road ahead keep me accompanied...
Follow on   Twitter

Comments and Discussions

 
QuestionWhat about Firefox Pinmemberaromr1-Oct-07 8:26 
AnswerRe: What about Firefox PinmemberEdelman1-Oct-07 11:53 
QuestionWill this approach work for Live website?? PinmemberMichael Sync30-Sep-07 16:23 
AnswerRe: Will this approach work for Live website?? PinmemberGovardhana Reddy26-Dec-07 3:28 

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 | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 28 Sep 2007
Article Copyright 2007 by Govardhana Reddy
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid