JSFiddle - React, Tailwind, and code Playground

by João Felipe

HTML

<br>
<br>
<br>
<hr>

<center>
  <blink>
    <input type='file' name='file' id='file' />
    <br>
    <div id='progress' />
        		<pre id="fileDisplayArea"><pre>

  </blink>
</center>

JavaScript

jQuery('#file').change(function(){
    var file = document.getElementById('file').files[0];
    var progress = jQuery('#progress');

    if(file){
      var reader = new FileReader();
      var size = file.size;
      var chunk_size = Math.pow(2, 13);
      var chunks = [];

      var offset = 0;
      var bytes = 0;


      reader.onloadend = function(e){
        if (e.target.readyState == FileReader.DONE){
          var chunk = e.target.result;
          bytes += chunk.length;
            debugger;

          chunks.push(chunk);

          progress.html(chunks.length + ' chunks // ' + bytes + ' bytes...');

          if((offset < size)){
            offset += chunk_size;
            var blob = file.slice(offset, offset + chunk_size);

            reader.readAsText(blob);

          } else {
            progress.html("processing teh content...");

            var content = chunks.join("");
            fileDisplayArea.innerText = e.target.result;
            alert("content is ready!");
          };
        }



      };

      var blob = file.slice(offset, offset + chunk_size);
      reader.readAsText(blob);
    }
  });