Reading file contents on the client-side in javascript in various browsers

Question

I\'m attempting to provide a script-only solution for reading the contents of a file on a client machine through a browser.

I have a solution that works with Firefox

Answer 1

There's a modern native alternative: File implements Blob, so we can call Blob.text().

async function readText(event) {
  const file = event.target.files.item(0)
  const text = await file.text();
  
  document.getElementById("output").innerText = text
}

Currently (September 2020) this is supported in Chrome and Firefox, for other Browser you need to load a polyfill, e.g. blob-polyfill.