wait till an upload is completed and then continue the script

Question

How can I wait in an for Loop till an upload is completed and then continue the for Loop with the next number?

I have searched the Internet but there is only the setTimeout function and so on!
Here My code:

for(var f=0;f<4;f++){
   var formdata = new FormData();
   var id = f+1;
   var file = _("filestyle-"+id).files[0];
   formdata.append("file"+id, file);
   var title = _("title"+id).value;
   formdata.append("title"+id, title);
   document.getElementById("uploadname").innerHTML=title+"is uploading<br>";
   var ajax = new XMLHttpRequest();
   ajax.upload.addEventListener("progress", progressHandler, false);
   ajax.addEventListener("load", completeHandler, false);
   ajax.addEventListener("error", errorHandler, false);
   ajax.addEventListener("abort", abortHandler, false);
   ajax.open("POST", "../swupload.php");
   ajax.send(formdata);
}

in the completeHandler a variable is set to 1

You need call back after file upload. this may help you http://stackoverflow.com/questions/8722601/how-do-i-call-a-js-callback-when-a-file-upload-completes — Apurva Ojas, May 01 '15 at 05:36

score 3 · Accepted Answer · edited May 01 '15 at 08:42

You can set code you want to execute at different stages of ajax request as:-

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

However in your case you want to execute code after completion of upload, it may be achieve like that:

ajax.onreadystatechange=function()
{
     if (ajax.readyState==4 && ajax.status==200)
     {
          // code to execute after upload
     }
}

Drazen Bjelovuk · Answer 2 · 2019-10-02T15:37:05.993

Ajax is asynchronous, so you can't expect your other synchronous code to wait for it. What you can do is replace your loop with a function, and recall it from your completeHandler callback.

post(1);

function post(id) {
   var formdata = new FormData();
   var file = _("filestyle-"+id).files[0];
   formdata.append("file"+id, file);
   var title = _("title"+id).value;
   formdata.append("title"+id, title);
   document.getElementById("uploadname").innerHTML=title+"is uploading<br>";
   var ajax = new XMLHttpRequest();
   ajax.upload.addEventListener("progress", progressHandler, false);
   ajax.addEventListener("load", completeHandler, false);
   ajax.addEventListener("error", errorHandler, false);
   ajax.addEventListener("abort", abortHandler, false);
   ajax.open("POST", "../swupload.php");
   ajax.send(formdata);

   function completeHandler() {
     if (id < 5) post(id + 1);
   }
}

If completeHandler must be defined outside of this function, you can preserve the id with a closure:

ajax.addEventListener("load", completeHandler(id), false);

function completeHandler(id) {
  return function() {
    if (id < 5) post(id + 1);
  }
}

wait till an upload is completed and then continue the script

2 Answers2