Gaurav's Blog

Everybody must be aware that multiple upload is soon going to be supported in all the browsers by default.. No more flash needed to upload multiple files.
For those completely unaware I will take a small brief :
Earlier ( HTML 4 ) using the input tag for the web page the users are allowed to select only one file. Various solutions came up to support multiple upload. They were like (with the problems ):

• Using JAVA applet ( you need java in you client machine..  Plus the days of applet are long dead )
• Using multiple browse button with array within the input tag ( looks pathetic )
• Using flash ( the way gmail , plupload etc  works But they use Flash and many devices do not support it)

Lets start with little bit of HTML5 multiple upload
First lets look at : www.w3schools.com/html5/tag_input.asp
It says “input” tag has a new attribute called “multiple” — Bingo!!
Now try this :

Doing this pretty simple just use :

<input type="file" multiple="multiple" />

One simple way that W3C suggests is to add the attribute – > multiple=”multiple”
But there are various problems to this :

• It uploads all the file together as a single chunk of data
• Therefore you have to wait until all the files are uploaded
• There is no way for the user to get any response from server until all the files are uploaded.
• Users may get frustrated and gives a bad UX

So Here I have another solution , ( please note you need to know little javascripting before you could attempt this )

1. We have our normal form with an input field ( with multiple attribute ) named “form_main”
2. We create another form and and name it “fake_form” (no multiple attribute ).
3. Then we use form_main’s onchange function to do the upload.
4. Now we get each file from the “form_main” in the javascript
5. we use the “fake_form” to create “FormData” object and then assign the file to that form.
6. We use AJAX to send the fake form .
7. we do the same step for all the files.
8. While using Ajax you can tell what should be done after tha ajax request is complete.

Here are the code snippets to help you out :

Main_form :

<form action="/some/url/to/server/script" enctype="multipart/form-data" id="main_form" method="post" >
 <input id="file_main_input" name="name[]" onchange="handleFiles(this);" type="file" multiple="multiple"/>
</form>

fake_form :

<form action="/some/url/to/server/script" enctype="multipart/form-data" id="fake_form" method="post" >
</form>

javascript:

function handleFiles(obj)
    {
    //do sometheing to hide your main_form give some animation , use jquery
    FileUpload(obj.files,0)
    }
function FileUpload(files,no) {
    // do some checking in case you need like files[no].size or files[no].type
     var data = new FormData(document.getElementById("fileinfo"));
          var xhr = new XMLHttpRequest();
          data.append('extra date',variable)
          data.append('add as much extra data as needed',var2)
          xhr.open("POST", "/some/url/to/server/script",true);
          xhr.send(data);
          xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
              var str=xhr.responseText.toString()
              // now do something with your response that you receive I generally prefer to return javascript for server and so I do an eval
              eval(str)
            // Now upload the next file
            if(no<files.length-1)
            {
              FileUpload(files,no+1)
            }
            }
          }
    }

Note this method is not supported By IE ( always a pain ) and even opera for some reason.
Works greate with the rest of the browsers.

Post a comment if you have any queries