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?

Answer 1

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

Answer 2

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.