title: Send ArrayBuffer to S3 put to signedURL
body: <p>I am progressively loading a file into a buffer, the buffer is valid, but the browser crashes when the ArrayBuffer is finished loading the file into it. What I need to do is to be able to send the pieces of the buffer <code>buf = this.concatBuffers(buf, buffer);</code> to the axios PUT request so I can progressively upload the file to s3, rather than load it into a single variable returned by the promise (as the memory gets exceeded).</p>
  
  <p>How do I modify the link between readFileAsBuffer and the uploadFileToS3 method to do this?</p>
  
  <p>This is my code so you can follow the process.</p>
  
  <pre><code>concatTypedArrays = (a, b) =&gt; {
    const c = new a.constructor(a.length + b.length);
    c.set(a, 0);
    c.set(b, a.length);
    return c;
  };
  
  concatBuffers = (a, b) =&gt;
    this.concatTypedArrays(
      new Uint8Array(a.buffer || a),
      new Uint8Array(b.buffer || b),
    ).buffer;
  
  readFileAsBuffer = file =&gt;
    new Promise((resolve, reject) =&gt; {
      const fileReader = new FileReader();
      fileReader.file = file;
      let buf = new ArrayBuffer();
      const fileChunks = new FileChunker(file, 2097152);
  
      fileReader.readAsArrayBuffer(fileChunks.blob());
  
      fileReader.onload = e =&gt; {
        this.onProgress(fileChunks);
        const buffer = e.target.result;
        buf = this.concatBuffers(buf, buffer);
  
        if (fileChunks.hasNext()) {
          fileChunks.next();
          fileReader.readAsArrayBuffer(fileChunks.blob());
          return;
        }
  
        resolve(buf);
      };
  
      fileReader.onerror = err =&gt; {
        reject(err);
      };
    });
  
  uploadFileToS3 = fileObject =&gt; {
    new Promise((resolve, reject) =&gt; {
      const decodedURL = decodeURIComponent(fileObject.signedURL);
  
      this.readFileAsBuffer(fileObject.fileRef).then(fileBuffer =&gt; {
        console.log(fileBuffer);
        axios
          .put(decodedURL, fileBuffer, {
            headers: {
              'Content-Type': fileObject.mime,
              'Content-MD5': fileObject.checksum,
              'Content-Encoding': 'UTF-8',
              'x-amz-acl': 'private',
            },
            onUploadProgress: progressEvent =&gt; {
              const { loaded, total } = progressEvent;
              const uploadPercentage = parseInt(
                Math.round((loaded * 100) / total),
                10,
              );
              this.setState({ uploadProgress: uploadPercentage });
              console.log(`${uploadPercentage}%`);
  
              if (uploadPercentage === 100) {
                console.log('complete');
              }
            },
          })
          .then(response =&gt; {
            resolve(response.data);
          })
          .catch(error =&gt; {
            reject(error);
          });
      });
    });
  };
  
  uploadAllFilesToS3 = () =&gt; {
    const { files } = this.state;
    new Promise((resolve, reject) =&gt; {
      Object.keys(files).map(idx =&gt; {
        this.uploadFileToS3(files[idx])
          .then(response =&gt; {
            this.setState({ files: [] });
            resolve(response.data);
          })
          .catch(error =&gt; {
            reject(error);
          });
      });
    });
  };
  
  calcFileMD5 = file =&gt;
    new Promise((resolve, reject) =&gt; {
      const fileReader = new FileReader();
      fileReader.file = file;
      const spark = new SparkMD5.ArrayBuffer();
      const fileChunks = new FileChunker(file, 2097152);
  
      fileReader.readAsArrayBuffer(fileChunks.blob());
  
      fileReader.onload = e =&gt; {
        this.onProgress(fileChunks);
        const buffer = e.target.result;
        spark.append(buffer);
  
        if (fileChunks.hasNext()) {
          fileChunks.next();
          fileReader.readAsArrayBuffer(fileChunks.blob());
          return;
        }
  
        const hash = spark.end();
        const checksumAWS = Buffer.from(hash, 'hex').toString('base64');
  
        resolve(checksumAWS);
      };
  
      fileReader.onerror = err =&gt; {
        reject(err);
      };
    });
  </code></pre>