I have Javascript code that uploads files to a server. Each upload is done using a XMLHttpRequest object.

xhr = new XMLHttpRequest();

//...

xhr.open('POST', 'https://<bucket>.s3.amazonaws/', true);
xhr.send(fd);

The upload in parallel works fine. The problem is that I need to detect when all of them have finished, because I have to do a final submit, but only if all the uploads are pleted.

My first try was save all the xhr objects in an array but I didn't know what to do with that :-(

var arrayxhr = [];

//...

//A loop {
    xhr = new XMLHttpRequest();
    arrayxhr.push(xhr);

    xhr.open('POST', 'https://<bucket>.s3.amazonaws/', true);
    xhr.send(fd);
//}

//And now?

I found this jQuery function /, but the same, I don't really know how to use it.

Can you help me please?

TIA,

I have Javascript code that uploads files to a server. Each upload is done using a XMLHttpRequest object.

xhr = new XMLHttpRequest();

//...

xhr.open('POST', 'https://<bucket>.s3.amazonaws./', true);
xhr.send(fd);

The upload in parallel works fine. The problem is that I need to detect when all of them have finished, because I have to do a final submit, but only if all the uploads are pleted.

My first try was save all the xhr objects in an array but I didn't know what to do with that :-(

var arrayxhr = [];

//...

//A loop {
    xhr = new XMLHttpRequest();
    arrayxhr.push(xhr);

    xhr.open('POST', 'https://<bucket>.s3.amazonaws./', true);
    xhr.send(fd);
//}

//And now?

I found this jQuery function https://api.jquery./ajaxplete/, but the same, I don't really know how to use it.

Can you help me please?

TIA,

• javascript
• jquery
• upload
• xmlhttprequest

Share Improve this question Follow asked Nov 21, 2014 at 8:25 Mario SMario S 1,98411 gold badge2121 silver badges3232 bronze badges 1

• Associate a callback for every xmlHttprequest, suppose number of request are 5, then make a variable say i = 5, and now in each callback, decrease it by one, and check if it is zero, if it is then run your final mit, as zero means all request are done, I hope it helps you, though it is late I Know. Tell me what do you think about this solution – Suraj Jain Commented Apr 25, 2018 at 1:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you can use jQuery you can use jQuery AJAX Deferred interface/methods and $.when method. $.ajax/$.post/$.get and other jQuery AJAX methods always return jQuery Deferred object:

$.when($.get('someUrl'), $.get('anotherUrl')).then(function () {
    //all request plete
});

In native javascript you can use native Promise or any promise library:

• http://www.javascriptoo./rsvp-js
• http://www.javascriptoo./Q (example https://gist.github./matthewp/3099268)

Also good article about Promises - http://www.html5rocks./en/tutorials/es6/promises/.

Native Promise with XMLHttpRequest example:

function doAjaxRequest(method, url, data){
  var promise = new Promise();
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);

  // Register the event handler
  xhr.onload = function(){
    if(xhr.status === 200){
      promise.resolve("Done");
    } else{
      promise.reject("Failed");
    }
  }; 

  data = data || {};

  xhr.send(data);

  return promise;
}

Promise.all(doAjaxRequest('post', 'someUrl'), doAjaxRequest('post', 'anotherUrl')).then(function (values) {
    //all request plete
});

Well, this is not exactly the answer to my question (detect that the asynchronous calls are pleted), but this answer works for me. I copy here just in case it helps someone else:

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.

https://stackoverflow./a/15557631/1893936