JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<input type="file" id="files_input" multiple/>
<br/><br/>
<button id="show">Show</button>
<br/>
<pre id="pre"></pre>

JavaScript

var loads = [];
let blah = '';

files_input.addEventListener('change', openFiles, false);

var pre = document.getElementById('pre');
document.getElementById('show').addEventListener('click', function() {
  console.warn(loads);

  pre.innerText = JSON.stringify(loads, null, 2);
}, false);

function openFiles(evt) {
  var files = evt.target.files;

  for (var i = 0; i < files.length; i++) {
    var file = files[i],
      reader = new FileReader();

    reader.onload = (function(file) { // here we save variable 'file' in closure
      return function(e) { // return handler function for 'onload' event

        //console.log('file', file);
        //console.log('e', e); // 'this' and 'e' are different objects
        //console.log('this', this);

        //var data = $.csv.toArrays(this.result,{separator:'\t'});
        var data = this.result; // do some thing with data
        
        blah = this.result;

        loads.push({
          name: file.name,
          data: data
        });
      }
    })(file);

		reader.readAsText(file);
  }
}

console.log('blah ', blah);