High Performance Browser Networking

record.js

// the file is split and uploaded in chunks via multiple XHR requests
/*
Slicing large file uploads is a good technique to provide more robust
API where connectivity is unstable or intermittent—e.g., if a chunk
fails due to dropped connection, the application can retry, or resume
the upload later instead of restarting the full transfer from the start.
*/


var blob = [];
const BYTES_PER_CHUNK = 1024 * 1024;
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() { ... };  
  xhr.setRequestHeader('Content-Range', start+'-'+end+'/'+SIZE);
  xhr.send(blob.slice(start, end));
  start = end;
  end = start + BYTES_PER_CHUNK;
}