JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="box">
  <input type="file" id="fileInput">
  <pre id="fileContent"></pre>
</div>

CSS

.box {
  display: flex;
  flex-flow: column wrap;
}

.box * {
  margin: 5px;
}

JavaScript

function handleFileSelect(event) {
  const reader = new FileReader()
  reader.onload = handleFileLoad;
  reader.readAsText(event.target.files[0])
}

function handleFileLoad(event) {
  console.log(event);
  document.getElementById('fileContent').textContent = event.target.result;
}

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);