Crashy Blobs?

Reading a big (>=2GB) Blob in Safari makes the browser crash when converting said blob to bytes.

by David Iglesias

HTML

<input type="file" id="file-input" />
<pre id="output"></pre>

JavaScript

const chunkSize = 1000000;

function log(text) {
	document.querySelector("#output").innerText += text + "\n";
}

// Simulate something that returns a Promise<ObjectURL>.
let objectUrl = new Promise((resolve, reject) => {
	document.querySelector("#file-input")
    .addEventListener("change", (event) => {
	    blobUrl = URL.createObjectURL(event.target.files[0]);
  	  resolve(blobUrl);
  	});
});

objectUrl
  .then(fetch)
  .then((response) => response.blob())
  .then((blob) => {
    let chunks = [];
    // Explode the blob in a bunch of chunks
    const size = blob.size;
    log('Expected size: ' + size);
    const numChunks = Math.ceil((size / chunkSize));
    for (let i = 0; i < numChunks; i++) {
      const start = i * chunkSize;
      let end = Math.min(start + chunkSize, size);
    	const slice = blob.slice(start, end, blob.type);
      chunks.push(slice.arrayBuffer());
    }
    return Promise.all(chunks);
  })
.then((chunks) => {
  // Look at the chunks
  let processedBytes = 0;
  chunks.forEach((chunk) => {
    processedBytes += chunk.byteLength;
  });
  log('Processed size: ' + processedBytes);
});