JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<script src="jquery-2.1.0.min.js"></script>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<body>

JavaScript

console.log("Started");
console.log("Awaiting file selection...");

function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object*/

    //files is a FileList of File objects. List some properties.
    var output = [];
    var fReader = new FileReader();

    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');

        console.log("Target file: " + f.name);
        fReader.readAsArrayBuffer(f);
        console.log("Load Successful");




        fReader.onload = function (e) {
            var buffer = e.target.result;
            console.log(buffer.byteLength);
            console.log('Byte: ' + buffer[0]);
        }


    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);