JSFiddle - React, Tailwind, and code Playground
HTML
<input type='file' id='filesInput' multiple>
<button id='submitBtn'>Check!</button>
JavaScript
(function() {
var fileInput = document.getElementById( 'filesInput' ),
submitBtn = document.getElementById( 'submitBtn' ),
progressCount = 0,
timeStart = Math.floor( Date.now() / 1000 ),
i;
submitBtn.addEventListener( 'click', function() {
UploadFiles( fileInput.files );
} );
function UploadFiles( files ) {
var xhr = new XMLHttpRequest(),
fd = new FormData();
// Lets count progress events.
xhr.upload.addEventListener( 'progress', function( evt ) {
progressCount += 1;
} );
// When loading is finished lets count average events per second.
xhr.upload.addEventListener( 'loadend', function( evt ) {
console.log( 'finished' );
var secondsElapsed = Math.floor( Date.now() / 1000 ) - timeStart;
console.log( ( progressCount / secondsElapsed ) + ' events per second' );
} );
// Adding files.
console.log( 'Adding ' + files.length + ' files' );
for ( i = 0; i < files.length; i ++ ) {
fd.append( 'file' + i, files[ i ] );
}
// Sending the xhr.
xhr.open( 'POST', 'http://fiddle.jshell.net' );
xhr.send( fd );
}
}());