JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

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

JavaScript

var loads = [];

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
                var dataVar = 'data-' +i;
                var wtfYo = dataVar(i);
                function dataVar(i){
                	var newDataVar = 'data-' +i;
                  return newDataVar;
                }
                loads.push({
                    name: file.name,
                    data: data,
                    number: dataVar(i)
                });
            }
        })(file);

        reader.readAsText(file);
    }
}