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

Asked 5/12, 2012 at 17:48 Answered 19/3, 2021 at 5:28

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?

Cho answered 5/12, 2012 at 17:48 Comment(0)

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

Mawkin answered 5/12, 2012 at 17:53 Comment(2)

how we will get "file" attribute passed to fr.readAsText(file);, please help – Rabato 25/4, 2017 at 3:27

var fr = new FileReader(); fr.onload = function(e) { console.log(e.target.result) }; fr.readAsText(file); this will print the read file – Chancellery 7/11, 2017 at 23:7

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.

Jerrold answered 3/7, 2020 at 2:53 Comment(1)

Best answer. Works like a charm. – Stickinthemud 23/9, 2020 at 21:40

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" />

Hass answered 19/3, 2021 at 5:28 Comment(0)

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>

Salina answered 7/12, 2019 at 6:42 Comment(3)

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. – Annelleannemarie 8/10, 2020 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. – Salina 8/10, 2020 at 21:20

You might be able to drag and drop the file onto the button though. – Salina 8/10, 2020 at 21:20

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>

Pauperism answered 29/10, 2020 at 9:50 Comment(0)

Recommended topics

Hot tags