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

Question

When readAsText() function is completed the result is stored in .result

How do I see if the content of the file read are correct in .result?

 fr = new FileReader();
 fr.readAsText(file);
 var x = fr.result;
 console.log(x); //does not display anything on console

Now how do I display the .result object to verify the the content?

score 70 · Accepted Answer · answered Dec 05 '12 at 17:53

70

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

answered Dec 05 '12 at 17:53

lostsource

21,070
8
66
88

6

how we will get "file" attribute passed to fr.readAsText(file);, please help – MechaCode Apr 25 '17 at 03:27
`var fr = new FileReader(); fr.onload = function(e) { console.log(e.target.result) }; fr.readAsText(file);` this will print the read file – kindjacket Nov 07 '17 at 23:07

score 5 · Answer 2 · answered Jul 03 '20 at 02:53

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.

Best answer. Works like a charm. – chichilatte Sep 23 '20 at 21:40 — chichilatte, Sep 23 '20 at 21:40

score 1 · Answer 3 · answered Dec 07 '19 at 06:42

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>

This was the fastest option to get running for me. Is there a way to simply "hard-code" the file name? I've tried "inspecting" the event.target.files[0], and cannot see where the actual path/filename is placed. This would save me a few clicks in having to select it each time. — Eric Manley, Oct 08 '20 at 12:56
I don't think that's possible as this is granting access to the host file system and that is probably protected. I suspect that allowing arbitrary websites to select the file they want to download might have security implications. — Glen Pierce, Oct 08 '20 at 21:20
You might be able to drag and drop the file onto the button though. — Glen Pierce, Oct 08 '20 at 21:20

score 1 · Answer 4 · answered Oct 29 '20 at 09:50

Yeah, the File API is poorly documented. The readAsText method is called before onload.

let onFileChange = (event) => {
  let file = event.target.files[0];

  let fileReader = new FileReader();
  fileReader.readAsText(file);

  fileReader.onload = (event) => {
    let fileAsText = event.target.result;
    console.log(fileAsText);
  };
};

<form>
  <input type="file" onChange={onFileChange} />
</form>

score 1 · Answer 5 · answered Mar 19 '21 at 05:28

async FileUploadHandler(e){
  let readInputFile = await inputFileReader(e);
}

async inputFileReader(event){
  return new Promise((res,rej)=>{
    let input = event.target;
    let reader = new FileReader();
    reader.onload = function(){
      res(reader.result)
    };
    reader.readAsText(input.files[0]);
  });
},

<input type="file" on-change="FileUploadHandler" />

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

5 Answers5

Linked