JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button>Read entire file in chuncks</button>
</span>

JavaScript

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  console.log(' Great success! All the File APIs are supported.');
} else {
  alert('The File APIs are not fully supported in this browser.');
}
/*  function postChunk(obj) {
	var url = "https://your.remote.server";
	return new Promise(function(resolve, reject) {
		var xhr = new XMLHttpRequest();
		xhr.open('post', url, true);
		xhr.responseType = 'json';
		xhr.onload = function() {
			var status = xhr.status;
			if (status == 200) {
				resolve(xhr.response);
			} else {
				reject(status);
			}
		};
        var params = "";
        // check that obj has the proper keys and create the url parameters
          if (obj.hasOwnProperty(action) && obj.hasOwnProperty(server_id) && obj.hasOwnProperty(filepath) && obj.hasOwnProperty(pos) && obj.hasOwnProperty(chunk)) {
            params += "action="+obj[action]+"&server_id="+obj[server_id]+"&filepath="+obj[filepath]+"&pos="+obj[pos]+"&chunk="+obj[chunk];
          }   	
		      if(params.length>0) {
            xhr.send(params);
            } else {
            alert('Error');
            }	
	});
  };  
 */  
function readChunk(reader,obj,divID) {
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        obj.chunk = evt.target.result;
      console.log(obj);
 			document.getElementById(divID).textContent += 
            ['Sending bytes: ', obj.pos*16000, ' - ', ((obj.pos*16000)+(obj.pos+1)*obj.chunk.length),
             '\n'].join('');
      /*postChunk(obj).then(function(data) {	
          if(data!=="" && data!==null && typeof data!=="undefined") {
					document.getElementById(divID).textContent += 
            ['Sent bytes: ', obj.pos*16000, ' - ', ((obj.pos*16000)+(obj.pos+1)*obj.chunk.length),
             '\n'].join('');
          } else {
          alert('Error! Empty response');	
          }
        }, function(status) {
         ...