JSFiddle - React, Tailwind, and code Playground

by Atul Chaudhary

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

var fileInput = document.getElementById("csv"),

  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);