Single File Upload to Multiple File Upload ASP.NET Web Forms

With ASP.NET File upload control we can only upload one file at a time while HTML5 has a good notion to upload multiple files at a time. Look at the animated image given below, which was the actual framework before HTML5 equivalent updates with ASP.NET 4.5 Framework.


In the above image we can’t even select multiple files. So, after the HTML5 equivalent update we can select multiple. Look at the animated image below.


You can see I just added one attribute ‘AllowMultiple="true"’ in existing File Upload control and I’m done client side.

Here is actual File Upload control that will allow us selecting multiple files.

<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true"/>

This actually generates following HTML5 equivalent markup.

<input type="file" multiple="multiple" name="FileUpload1" id="FileUpload1" />

Now the code behind to handle this single file upload request and multiple file upload will be slightly different, let’s look at the single file upload code-behind.

protected void btnUpload_Click(object sender, EventArgs e)
{
    if(FileUpload1.HasFile)
    {
        //upload logic
        Response.Write(FileUpload1.FileName + " - " + FileUpload1.PostedFile.ContentLength + " Bytes. <br />");
    }
}

In the above code behind we are checking if FileUpload1 has any file selected go and upload it and write the response on the DOM, here is output.

Now, let’s look at multiple file upload code behind.

protected void btnUpload_Click(object sender, EventArgs e)
{
    if(FileUpload1.HasFiles)
    {
        foreach(var file in FileUpload1.PostedFiles)
        {
            //upload logic
            Response.Write(file.FileName + " - " + file.ContentLength + " Bytes. <br />");
        }
    }
}

In the above code behind we are checking if FileUpload1 has any file or files selected go and upload it by looping through posted files and write the response on the DOM, here is output.


This is super cool.

What about old browsers that does not support HTML5?

Well old browsers will simply ignore this new attribute multiple="multiple" and code behind will work closely similar to single file upload always.

Hope this helps.

Comments

  1. Its not working in framework 4.0. So please give me solution for it.

    ReplyDelete
  2. yes its not working in asp.net 4.0 .So please give me solution for it

    ReplyDelete
  3. Its working fine in asp.net 3.5 and 4.0.
    Thank You.
    Sharath

    ReplyDelete
  4. In .Net 3.5 and 4.0 your markup in the control needs to be multiple="multiple" instead of allowmultiple="true"

    ReplyDelete
  5. Hi, thank you for sharing.
    i am looking for asp.net webforms code to upload multiple images with preview into a folder. i've been searching for a while, and i think this is the closest i get. i need help. any leads/hints/or anything for me?
    Thanks

    ReplyDelete
  6. the given code is not working for frame work version 3.5 or 4 as the file upload control does not have HasFiles and PostedFiles

    ReplyDelete
  7. How To Pick Multiple File From Multi Location

    ReplyDelete
  8. i want select only two image then.......?

    ReplyDelete
  9. want select only two images then what can i do

    ReplyDelete
  10. This is not working in a separate window opened by window.open()

    ReplyDelete
  11. hi sir, i want upload 6 different images in 6 columns which is not possible like this. please tell how to use fileupload multiple times on a single web page.. and how to display all the images on next web page

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System