HTML5 File API: How to see the result of readAsText()
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,
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.onabortA handler for the
abortevent. This event is triggered each time the reading operation is aborted.FileReader.onerrorA handler for the
errorevent. This event is triggered each time the reading operation encounter an error.FileReader.onloadA handler for the
loadevent. This event is triggered each time the reading operation is successfully completed.
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>