Gerald Hughes:

I want to Upload some files. If the file is smaller than 1gb, upload it entirely. If the file is bigger than 1gb, upload it as segments of maximum 1gb each. My code works correctly on small files, but when I try to upload bigger files, the browser crashes. Error "Debugging connection was closed. Reason: Render process gone." The file that I was making tests with is 4,3 GB, and will start 5 XHR request.

What am I doing wrong?

let count = 0;
  for (let url of this.urls) {
            var start = 0 + (idx * 1000000000);

    var stop = 0;
    if (this.urls.length === 1)
      stop = files[0].size;
    else if (this.urls[this.urls.length - 1] == url)
      stop = start + (files[0].size % 1000000000);
    else
      stop = start + 1000000000;

    var reader = new FileReader();
    // If we use onloadend, we need to check the readyState.
    reader.onloadend = (event) => {
      if (reader.readyState === 2) {
        this._httpService.xhrBlobPut(url, reader.result).subscribe(result => {
          count += 1;
          if (count == this.urls.length) {
            this._storageService.postFile(this.appId, this.fileId, payload).subscribe(result => {
            });
          }
        });
      }
    };
    var blob = files[0].slice(start, stop + 1);

    reader.readAsArrayBuffer(blob);
    this.isUploaded = true;
    idx += 1;
  }



xhrBlobPut(url: string, body: any): Observable {
    return Observable.fromPromise(new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 201) {
              resolve(xhr.response)
            } else {
              reject(xhr.response)
            }
          }
        }
        xhr.open("PUT", url);
        xhr.send(body);
    }));
}