How to load file in TypeScript

Question

I'm new at Typescript and have a syntax problem. I want to load a user selected file (not using JQuery) and print the results to the console for now. I was following some guides in JS but with no success. This is what I have so far.

index.html

<input type="file" id="file-input" >

index.ts

document.getElementById("file-input").addEventListener("change", e => {
  var reader = new FileReader();
  var self = this;
  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; 
  };
  console.log(self.text.toString());
}, false);

This gives the following error in the console report:

Uncaught TypeError: Cannot read property 'toString' of undefined
    at HTMLInputElement.<anonymous>

I'm not quite sure how to get the text from the buffer or if I'm even setting it up correctly.

UPDATE: Current code with modifications:

document.getElementById("file-input").addEventListener("change", async (e) => {
  var file = (<HTMLInputElement>e.target).files[0];
  var reader = new FileReader();
  reader.onload = file => {
      var contents: any = file.target;
      this.text = contents.result; 
      console.log(this.text.toString());
  };
}, false);

Move the console.log inside the callback, which is called asynchronously, when the file is finally loaded, long after the file input change event listener function has returned. — JB Nizet
– JB Nizet, Commented May 2, 2019 at 21:52
Also, this self variable is unnecessary. Just use this: that's what arrow functions allow. — JB Nizet
– JB Nizet, Commented May 2, 2019 at 21:54
I thought that was the case @JBNizet, I moved the console.log inside the callback. However, I don't get any console display (or errors) then. I corrected the self variable usage. — Shawn
– Shawn, Commented May 2, 2019 at 21:56
That's because you never read the file. All you're doing it telling what to do when it's read. But you need to trigger the read: developer.mozilla.org/en-US/docs/Web/API/FileReader/onload — JB Nizet
– JB Nizet, Commented May 2, 2019 at 22:02

basarat · Accepted Answer · 2019-05-03 00:22:02Z

Focus in on the code

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; 
  };
  console.log(self.text.toString());

The order of execution you think it has:

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // FIRST 
  };
  console.log(self.text.toString()); // SECOND

The order of execution in reality:

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // SECOND
  };
  console.log(self.text.toString()); // FIRST

Hence you are getting the error as .text isn't assigned by the time self.text.toString runs.

FIX

One way:

  reader.onload = file => {
      var contents: any = file.target;
      self.text = contents.result; // FIRST
      console.log(self.text.toString()); // SECOND 🌹
  };

Collectives™ on Stack Overflow

How to load file in TypeScript

1 Answer 1

FIX

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

FIX

Comments

Your Answer

Sign up or log in

Post as a guest

Related