HTML5 File API: How to see the result of readAsText()

This is a complete html and vanilla javascript example that creates a simple file input and a file reader that reads the file with FileReader.readAsText()then writes the text content of that file to the console. This works well for files like .txt or .csv.

There are also FileReader.readAsArrayBuffer(), FileReader.readAsBinaryString(), and FileReader.readAsDataURL() which might work better for other use cases. I also recommend reading https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Note: Users can select multiple files to include in the input, this code will only read the first of those files (as you can see in the reference to the [0] element in event.target.files.

<html>
  <head>
    <script>
      window.onload = function(event) {
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
      }

      function handleFileSelect(event) {
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
          console.log(event.target.result);
        }
        var file = event.target.files[0];
        fileReader.readAsText(file);
      }
    </script>
  </head>
  <body>
    <input type="file" id="fileInput">
  </body>
</html>

readAsText is asynchronous, so you would need to use the onload callback to see the result.

Try something like this,

var fr = new FileReader();
fr.onload = function(e) {
    // e.target.result should contain the text
};
fr.readAsText(file);

Further information here,

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


This took me like 300 hours to figure out even after reading the documentation and examples online...

Here's some actual, working code:

let fileReader = new FileReader();
fileReader.onload = function(event) {
    alert(fileReader.result);
};
inputElement.onchange = function(event) {
    fileReader.readAsText(event.target.files[0]);
};

Also, FYI:

FileReader.onabort A handler for the abort event. This event is triggered each time the reading operation is aborted.

FileReader.onerror A handler for the error event. This event is triggered each time the reading operation encounter an error.

FileReader.onload A handler for the load event. This event is triggered each time the reading operation is successfully completed.

Tags:

Javascript

Html

Fileapi

Recent Posts