JSFiddle - React, Tailwind, and code Playground

by avnerm

HTML

<form>
<input id="input" type="file"></input>
</form>
<pre id="output"></pre>

CSS

pre {
    width: 400px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: wrap;
}

JavaScript

var input = $('#input');
var output = $('#output');

function readFile(f) {
    var reader = new FileReader();
    reader.readAsText(f);
    reader.onload = function() {
        var text = reader.result;
        output.html("");
        output.html(text);
    };
    reader.onerror = function(e) {
        console.log("Error:", e);
    };
}

function readFile2(f) {
    let reader = new FileReader();
	  output.html("Before readAsArrayBuffer");
    try{
        reader.readAsArrayBuffer(f);
        reader.onload = function(fileLoadedEvent) {
            let arrayBuffer = fileLoadedEvent.target.result;
            console.log('arrayBuffer: ', arrayBuffer);

            // output.html("");
            output.html("After readAsArrayBuffer");
        };
    }
    catch(e)
    {
        output.html("Error reading");
    }
}


input.bind("change", function(e) {
    var file = e.currentTarget.files[0];
    readFile2(file);
});