title: Push ArrayBuffer in Array for constructing a Blob
body: <p>I've got an array of URLs <code>[URL1, URL2, URL3,...]</code> :  each element is a link to one of the chunks of the same file. Each chunk is separately encrypted, with the same key as all the other chunks.</p>
  
  <p>I download each chunk (in a <code>forEach</code> function) with a <code>XMLHttpRequest</code>. <code>onload</code> :</p>
  
  <ol>
  <li>each chunk is first decrypted</li>
  <li>then each chunk is converted to an <code>ArrayBuffer</code> (<a href="https://stackoverflow.com/a/5100158/7281870">source</a>)</li>
  <li>each <code>ArrayBuffer</code> is pushed to an array (<a href="https://stackoverflow.com/a/24876873">source</a>)</li>
  <li>when the three first steps are done for each chunk (<code>callback</code> by a <code>var</code> incremented on step#1 === the <code>array.length</code>), a blob is constructed with the array</li>
  <li>the blob is saved as file with FileReader API &amp; <a href="https://github.com/eligrey/FileSaver.js/" rel="nofollow noreferrer">filesaver.js</a></li>
  </ol>
  
  <p>If it's a one chunk's file, everything works fine.</p>
  
  <p>But with multiple chunks, steps #1 &amp; #2 are ok, but only the last <code>ArrayBuffer</code> seems to be pushed to the array. What am I missing?</p>
  
  <p>Below my code</p>
  
  <pre><code>// var for incrementation in forEach funtion
  var chunkdownloaded = 0;
  // 'clearfileurl' is the array of url's chunks :[URL1, URL2, URL3,...]
  clearfileurl.forEach(function(entry) {
      var xhr = new XMLHttpRequest();
      var started_at = new Date();
      xhr.open('GET', entry, true);
      xhr.responseType = 'text';
  
      // request progress
      xhr.onprogress = function(pe) {
          if (pe.lengthComputable) {
              downloaderval.set((pe.loaded / pe.total) * 100);
          }
      };
  
      // on request's success
      xhr.onload = function(e) {
          if (this.status == 200) {
  
              chunkdownloaded+=1;
              var todecrypt = this.response;
  
              // decrypt request's response: get a dataURI
              try { 
                  var bytesfile  = CryptoJS.AES.decrypt(todecrypt.toString(), userKey);
                  var decryptedfile = bytesfile.toString(CryptoJS.enc.Utf8);
              } catch(err) {
                  console.log (err);
                  return false;
              }
  
              //convert a dataURI to a Blob
              var MyBlobBuilder = function() {
                  this.parts = [];
              }
  
              MyBlobBuilder.prototype.append = function(dataURI) {
              //function dataURItoBlob(dataURI) {
                  // convert base64 to raw binary data held in a string
                  var byteString = atob(dataURI.split(',')[1]);
  
                  // separate out the mime component
                  // var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  
                  // write the bytes of the string to an ArrayBuffer
                  var ab = new ArrayBuffer(byteString.length);
                  var ia = new Uint8Array(ab);
                  for (var i = 0; i &lt; byteString.length; i++) {
                      ia[i] = byteString.charCodeAt(i);
                  }
                  this.parts.push(ab);
                  console.log('parts', this.parts)
                  this.blob = undefined; // Invalidate the blob
              }
  
              MyBlobBuilder.prototype.getBlob = function() {
                  if (!this.blob) {
                      console.log (this.parts);
                      this.blob = new Blob(this.parts);
                  }
                  return this.blob;
              };
  
              var myBlobBuilder = new MyBlobBuilder();
              myBlobBuilder.append(decryptedfile);
  
              // if all chunks are downloaded
              if (chunkdownloaded === clearfileurl.length) {
                  // get the blob
                  var FinalFile = myBlobBuilder.getBlob();
  
                  // launch consturction of a file with'FinalFile' inside FileReader API
                  var reader = new FileReader();
                  reader.onload = function(e){
                      // build &amp; save on client the final file with 'file-saver' library
                      var FileSaver = require('file-saver');
                      var file = new File([FinalFile], clearfilename, {type: clearfiletype});
                      FileSaver.saveAs(file); 
                  };
                  reader.readAsText(FinalFile);
  
              } else {
                  console.log('not yet');
              }
          } 
      };
      // sending XMLHttpRequest
      xhr.send();
  });
  </code></pre>