CODEWITHSUNDEEP
javascriptajaxjqueryxmlhttprequest
Chris
Chris

Reputation: 7855

Monitoring progress in synchronous XMLHttpRequest calls

On the clientside i have a File-Dropzone (HTML5 File-API) where the user can drop multiple files that should be uploaded to the server. For each file a new XMLHttpRequest Object is created and the file is sent asynchronously to the server. I'm monitoring the progress through a progress event Listener on the xhr.upload object.

The problem is, that as of now the server side needs to get the files synchronously because there is some calculation happening that must be done one file after another on the server-side and unfortunately i cannot change that implementation. But if i set the xhr object to send the files synchronously the function that i registered with the progress event will not fire anymore so i'm not able to monitor the progress.

Can anyone help with that? (If there is a solution using the native functionality of jQuery, i can also use that).

Here's the important part of the code i'm currently using:

for (var i = 0; i < files.length; i++) {
           var file = files[i];                              

           var xhr;
           if (window.XMLHttpRequest)
              xhr=new XMLHttpRequest();
           else
              xhr=new ActiveXObject("Microsoft.XMLHTTP");

           xhr.upload.addEventListener('progress',function(ev){
               var percent = Math.round((ev.loaded/ev.total) * 100);                                       
               console.log(i + " : " + percent + "%");                                     
               progress.style.width = percent +'%';   
               if(progressHtml)
                   progressHtml.innerHTML = i + "/" + files.length + " : " + percent + "%";
            }, false);

            xhr.open("post", "/servlet/de.test.UploadDropServ", false); //synchronous                                    
            xhr.setRequestHeader("Filename", file.name);
            xhr.setRequestHeader("UniFilename", file.name);            
            xhr.send(file);          

            xhr.addEventListener("load", function () {                    
                progress.style.width = "100%";                                      
            }, false);                                                                                               
         }
     }

Upvotes: 3

Views: 3413

Answers (1)

Olivier St-L
Olivier St-L

Reputation: 386

So the problem now is that you DO NOT want it to be asynchronous.

When you set your request to synchronous, the javascript will wait till it is complete before doing anything else, including the progress callback.

If you want a progress callback to work, you need it to be asynchronous. To do so, you have two solutions :

1: If server-side is PHP, start the session but DO NOT close it, and it will be synchronous.

2: On the client-side, create a stack of files to upload and upload one at a time, calling the next one on the "Complete" callback of the previous.

Upvotes: 1

Related Questions