title: Only the last XMLHttpRequest returns data
body: <p>I am retrieving some files from the server and adding them to a file[] so I can read them later. However, when I read multiple images, I only get the data from the last image. The rest are null.</p>
  
  <pre><code>      var files = [];
        var imageURLs = [];
  
        for(var i = 0; i &lt; image.length; i++){
          imageURLs[i] = image[i].firstChild.nodeValue + "?t="+ Math.random();
        }
  
        for(var i = 0; i &lt; imageURLs.length; i++){
          var xhr = new XMLHttpRequest();
          xhr.open("GET", imageURLs[i]);
          xhr.responseType = 'arraybuffer';
          xhr.customURL = imageURLs[i];
          xhr.send();
          xhr.onreadystatechange = function() {
            if(this.readyState == 4 &amp;&amp; this.status == 200){
              var index = imageURLs.indexOf(this.responseURL);
              imageURLs.splice(index, 1);
              var arrayBuffer = xhr.response;
              files.push(new File([arrayBuffer], this.responseURL.toString().split('#').shift().split('?').shift().split('/').pop()));
              if(imageURLs.length == 0){
                makeFileList(files);
              }
            }
          };
        }
  </code></pre>
  
  <p>I am getting the links from an XML file.</p>
  
  <p>--------------------------------------UPDATE------------------------------------</p>
  
  <p>I fixed it by making a seperate array of XMLHttpRequest's and processing them individually like so:</p>
  
  <pre><code>      var imageURLs = [];
        var files = [];
        var xhrs = []; //THIS IS NEW
  
        for(var i = 0; i &lt; image.length; i++){
          imageURLs[i] = image[i].firstChild.nodeValue + "?t="+ Math.random();
          //I initialized them here
          xhrs[i] = new XMLHttpRequest();
          //I set their callbacks
          xhrs[i].onreadystatechange = function() {
            if(this.readyState == 4 &amp;&amp; this.status == 200){
              var index = imageURLs.indexOf(this.responseURL);
              imageURLs.splice(index, 1);
              var arrayBuffer = this.response;
              files.push(new File([arrayBuffer], this.responseURL.toString().split('#').shift().split('?').shift().split('/').pop()));
              if(imageURLs.length == 0){
                makeFileList(files);
              }
            }
          };
        }
  
        for(var i = 0; i &lt; imageURLs.length; i++){
          //I sent them
          xhrs[i].open("GET", imageURLs[i]);
          xhrs[i].responseType = 'arraybuffer';
          xhrs[i].customURL = imageURLs[i];
          xhrs[i].send();
        }
  </code></pre>