JSFiddle - React, Tailwind, and code Playground

by JinHan Heo

HTML

<p>Select local CSV File:</p>
<input id="csv" type="file">
    
<output id="out">
    file contents will appear here
</output>

CSS

output {
    display: block;
    margin-top: 4em;
    font-family: monospace;
    font-size: .8em;
}

JavaScript

const fileInput = document.getElementById("csv");
const readFile = function () {
	var reader = new FileReader();
 		reader.onload = function () {
			document.getElementById('out').innerHTML = reader.result;
    };
    // start reading the file. When it is done, calls the onload event defined above.
    reader.readAsBinaryString(fileInput.files[0]);
};

fileInput.addEventListener('change', readFile);