JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/loadingoverlay.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/extras/loadingoverlay_progress/loadingoverlay_progress.min.js"></script>
Select a file to see the column count.<br>
<input type=file id=f><br>
<div id="timeTaken"></div>
Column size: <textarea id=out></textarea>

CSS

#out {
  width:100%;
  height:50vh;
}

out {
  background-color:green;
}

JavaScript

document.getElementById('f').onchange = function() {
    if (!this.files.length) return;
    findColumnLength(this.files[0], function(data) {
    console.log("afterfileread" + data)
        document.getElementById('timeTaken').innerHTML =  data + " seconds";
        renderTextArea();
    });
};



var dataArr = [];


function renderTextArea() {
	if(dataArr.length > 0) {
  		document.getElementById('out').value  = document.getElementById('out').value + dataArr.shift();
      setTimeout(renderTextArea, 1000);
  } else {
  		console.log("rendered");
      $("#out").LoadingOverlay("hide");
  }

}

function findColumnLength(file, callback) {
    // 1 KB at a time, because we expect that the column will probably small.
    var CHUNK_SIZE = 1024 * 50;
    var offset = 0;
    var fr = new FileReader();
    $("#out").LoadingOverlay("show");
    fr.onload = function() {
    		var data = fr.result;
       //console.log(data.length)
       /*	setTimeout(function(){
        	callback(data);
        },50);*/
				
        dataArr.push(data)
        // \r or \n not found, continue seeking.
        offset += CHUNK_SIZE;
        seek();
    };
    fr.onend = function() {
    	console.log('onend');
    }
    fr.onerror = function() {
        // Cannot read file... Do something, e.g. assume column size = 0.
        console.log('onerror');
        callback(0);
    };
    seek();

    function seek() {
        if (offset >= file.size) {
            // No \r or \n found. The column size is equal to the full
            // file size
            console.log('end', dataArr.length)
            callback(dataArr.length);
            return;
        }
        var slice = file.slice(offset, offset + CHUNK_SIZE);
        fr.readAsBinaryString(slice);
    }
}