This is a card in Dave's Virtual Box of Cards.

Reading files from JavaScript

Created: 2023-12-18

See Downloading files from JavaScript with Data URLs (which happens to be a handy way to get a small text file to test here!)

Here is an all-in-one example of picking a text file from the local computer and reading its contents locally in the browser. No server involved.

What you can’t see in the example below is the hidden file input element tag. So here it is:

<input id="file_elem" type="file" accept="text/plain" style="display:none;">

Now, on to the example…​

Loaded text will appear here.

Here's the script:

(Script displayed with Galadriel's Mirror 2.)

Some handy MDN links:

https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications

https://developer.mozilla.org/en-US/docs/Web/API/File

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Back to javascript.