Javascript way to Create and Send large amount of data without using too-much memory

Question

I am testing upload speed of my device! So i need some data to send to the server. Here i create some data.

var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});

Now i send it to the server

var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send)

The Problem is When i try to upload 90Mb or more data from Safari iPhone 6S. It is retuning an error

""Failed to load resource: WebKit encountered an internal error""

It depends on the size of the page etc. From an Empty page Safari on iPhone 6S Managed to send up to 100Mb of data. But i need large chunks of data like 500Mb or 1Gb.

Desktop Chrome/Safari/FF/IE on Mac/Windows allow more than 500Mb of data.

var Send = new Blob([new ArrayBuffer(5e+8)], {type: 'application/octet-stream'});
var xhr = new XMLHttpRequest;
xhr.open("POST", 'http://192.168.1.10/v4/upload', true);
xhr.send(Send);

How can i create large amount of data without using too-much memory. Also i need to Send it using XHR2. NO WSS etc.

Anyway we can do this?

Answer 1

Per specs you should be able to xhr.send() a ReadableStream, but AFAIK, no browser did implement that yet...

Otherwise that would have given something like

const stream = new ReadableStream({
  start(controller) {
    setInterval( () => {
      controller.enqueue( dummy_data );
    }, interval );
  }
});
const xhr = new XMLHttpRequest();
xhr.open('post', url);
xhr.send(stream);

---

---

A solution for your case would be to send a File from the device storage directly: create your file beforehand and select it with an <input type="file">, the browser should stream it for you.

fileInput.onchange = (evt) => {
  const xhr = new XMLHttpRequest();
  xhr.open('post', url);
  xhr.send(fileInput.files[0]);
};