Facebook Parallel image upload - How does parallel thing works

Question

I am trying to implement an ajax style submission form for File Upload.

I was successfully able to get a progress bar updated. i mean the whole logic works fine.

But then I looked at Facebook. I found that -

1) Facebook allows multiple selection of Images. -> I am able to do so

2) Once all images are selected. They start uploading simultaneously and user can see individual progress of each upload.

Analysis: In my case when I submit, I submit all the images selected by user at once, So I get progress bar for the complete submission not the individual file submission.

My Query is: How can we achieve parallel uploads on all selected images and get a individual progress on all.

Answer 1

For uploading multiple files at the same time, I will follow the steps-

1. First I when the form will be submitted, depending on the number of file selected I will dynamically create that much different number of independent ajax request through javascript(Jquery will help for that).
2. While uploading the files, I can monitor through the javascript and one server script that how much data is remaining to upload, based on that I can show the progress bar for each of the files being uploaded.
3. Next in server side, I don't need to worry about because the php script what one will write that will take all the request separately.

How to monitor the Uploading progress

In small files, you may not get the exact progress details because it will upload very fast but in large file you can monitor.

What you will have to do is creating a separate PHP file which will generate the information that how much % file is uploaded, through the session variable $_SESSION , when a file is started uploading it creates a session for it and how much data is processed is stored(in bytes) and what is the file size(in byte) in the keys bytes_processed and content_length respectively.
And that information I will process through javascript by sending another request. And that request will be made for each of the files being uploaded by binding, and after limited number of time(may be 1 sec.) I will again send the request for knowing the progress by setTimeout() till when the file is 100% is uploaded.

Answer 2

Facebook uses the HTML5 Files API to make independent XHR2 requests for multiple file upload. When it is not supported it'll try to use Flash and when that is also not supported it falls back to the basic form submission.

You can achieve the same result with this code:

function upload(files){

    for(i=0;i<this.files.length;i++){
        window['xhr'+i] = new XMLHttpRequest();
        window['xhr'+i].open("POST", "/ajax/upload", true);
        window['xhr'+i].upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
               var progress = Math.round((evt.loaded / evt.total) * 100);

               //Change the progress bar value 
            }
        })
        window['xhr'+i].addEventListener("load", function () {

               //Upload Complete. Run callback function
               callback(this.responseText);

        }, false);
    var _params = new FormData();
    _params.append('file'+i, this.files[i]);
    window['xhr'+i].send(_params);

   }
}

Then in your body:

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

<script>

      document.getElementById('files').addEventListener('change', upload, false);

</script>