How To Read Files In Javascript (Simple Examples)

Welcome to a quick tutorial and examples of how to read files in Javascript. Yes, you read that right – It is possible to read files in client-side Javascript.

That covers the quick basics, and the file reader is also capable of reading images and binary data. Read on for more examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/javascript-read-files/” title=”Read Files With Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

EXAMPLE 1) READ AS TEXT

1A) THE HTML

<input type="file" value="Choose TXT File" id="demoPickA"
       accept="text/plain" onchange="readFileA()">
<div id="demoShowA"></div>

For this first example, we have a simple “choose file” button, and a <div> to show the contents of the selected text file.

 

1B) THE JAVASCRIPT

function readFileA () {
  // (A) GET SELECTED FILE
  let selected = document.getElementById("demoPickA").files[0];
 
  // (B) READ SELECTED FILE
  let reader = new FileReader();
  reader.addEventListener("loadend", () => {
    document.getElementById("demoShowA").innerHTML = reader.result;
  });
  reader.readAsText(selected);
}

This is pretty much the “full version” of the snippet in the introduction, and it should be self-explanatory –

1. Get the selected file from the input field
2. Read the file and display the contents in <div id="demoShowA">.

 

1C) THE DEMO

 

 

EXAMPLE 2) READ AS DATA URL (IMAGE)

2A) THE HTML

<input type="file" value="Choose Image File" id="demoPickB"
       accept="image/*" onchange="readFileB()">
<img id="demoShowB">

Take note that the file field is now restricted to images, and we use an empty <img> to display the selected image instead.

 

2B) THE JAVASCRIPT

function readFile() {
  // (A) GET SELECTED FILE
  let selected = document.getElementById("demoFile").files[0];
 
  // (B) READ SELECTED FILE
  let reader = new FileReader();
  reader.addEventListener("load", () => {
    let imgTag = document.getElementById("demoShowB");
    imgTag.src = reader.result;
  });
  reader.readAsDataURL(selected);
}

Look no further, we are pretty much only using readAsDataURL() instead of readAsText() in this example. This will directly get the file data as a base64 encoded string – Rather useful for doing things like “preview selected image”.

 

2C) THE DEMO

 

 

EXAMPLE 3) READ AS BINARY DATA

3A) THE HTML

<input type="file" value="Choose File" id="demoPickC"
        onchange="readFileC()">

 

3B) THE JAVASCRIPT

function readFileC () {
  // (A) GET SELECTED FILE
  let selected = document.getElementById("demoPickC").files[0];
 
  // (B) READ SELECTED FILE
  let reader = new FileReader();
  reader.addEventListener("load", () => {
    var bindata = reader.result;
    console.log(bindata);
  });
  reader.readAsBinaryString(selected);
}

This should be getting stale now – Use readAsBinaryString() to read the file as a binary string. I personally can’t think of a good simple example for this… But this will come in handy for raw data processing and exchange. Maybe create a new blob object, convert it into a ReadableStream.

 

EXAMPLE 4) READ AS ARRAY BUFFER

4A) THE HTML

<input type="file" value="Choose File" id="demoPickD"
        onchange="readFileD()">

 

4B) THE JAVASCRIPT

function readFileD () {
  // (A) GET SELECTED FILE
  let selected = document.getElementById("demoPickD").files[0];
  
  // (B) READ SELECTED FILE
  let reader = new FileReader();
  reader.addEventListener("load", () => {
    var buffer = reader.result;
    console.log(buffer);
    console.log(buffer.byteLength);
  });
  reader.readAsArrayBuffer(selected);
}

Finally, we have readAsArrayBuffer(), read the file as an ArrayBuffer. Again, I don’t have a good simple example for ArrayBuffer here – That is out of topic for this tutorial, and it is a boring low-level operation (binary processing). Will leave a link below if you are interested.

 

 

EXAMPLE 5) OPEN FILE PICKER PROGRAMMATICALLY

<script>
async function readFileE () {
  // (A) OPEN FILE PICKER
  [handler] = await window.showOpenFilePicker({
    excludeAcceptAllOption: true,
    types: [{
      description: "Text",
      accept: { "text/plain": [".txt", ".text"] }
    }]
  });
 
  // (B) GET SELECTED FILE
  let selected = await handler.getFile();
 
  // (C) READ SELECTED FILE
  let reader = new FileReader();
  reader.addEventListener("loadend", () => {
    document.getElementById("demoShowE").innerHTML = reader.result;
  });
  reader.readAsText(selected);
}
</script>
 
<input type="button" value="Choose File" onclick="readFileE()">
<div id="demoShowE"></div>

Lastly, we can use window.showOpenFilePicker() to open the “choose a file” dialog box in Javascript. But please take note that it will only work on Chrome, Edge, and Opera at the time of writing – CanIUse.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• File Reader – CanIUse
• Show Open File Picker – CanIUse

Yep, reading files is not for the old Internet Exploders.

 

LINKS & REFERENCES

• File Access API – MDN
• File Reader – MDN
• ArrayBuffer, binary arrays – Javascript.info
• Ways To Read Files In NodeJS – Code Boxx

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEATSHEET