How to make FileReader work with Angular

Question

When reading a file from client side with Angular2 and Typescript,

I try to use FileReader in this way:

var fileReader = new FileReader();
fileReader.onload = function(e) {
    console.log("run fileReader.onload");
   //  ......
}

But it doesn't work at all, this 'fileReader.onload' function will never be called.

How to make FileReader work with Angular?

Answer 1

Hello @kartik,

First you have to specify the target of the change event on input form in template:

@View({
  template:`
    <div>
      Select file:
      <input type="file" (change)="changeListener($event)">
    </div>
  `
})

As you can see I binded a changeListener() method to (change) event. My implementation of class:

  changeListener($event) : void {
    this.readThis($event.target);
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();

    myReader.onloadend = function(e){
      // you can perform an action with readed data here
      console.log(myReader.result);
    }

    myReader.readAsText(file);
  }

Listener is passing file from event to readThis method. Read this have implemented it's own FileReader. You can also define FileReader in component instead in function.

Hope it helps!!

Want to know more about Angular? Get your Angular Certification today and become certified.
Thank you!!