example/progress-upload-real.html

<!DOCTYPE HTML>
<h5>upload progress events</h5>
<pre id="events"></pre>

<script src="../dist/xhook.js"></script>
<script type="text/javascript">

//hook
xhook.before(function(request) {
  append('hooked xhr though left untouched!');
});

function append(str) {
  document.getElementById('events').innerHTML += str + "<br>";
}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(e) {
  append('readyState '+ xhr.readyState);
}

xhr.upload.onloadstart = function(e) {
  append('upload started');
}

xhr.upload.onprogress = function(e) {
  append(Math.round((e.loaded/e.total)*100));
}

xhr.upload.onload = function(e) {
  append('upload complete');
}

xhr.open('POST', 'missing-endpoint?r='+Math.random());

var data = [];
var i = 5e4;
while(i--) data.push(i);
data = data.join('-');

append('sending #'+data.length+' chars');

xhr.send(data);

</script>