How to make FileReader work with Angular2?

Question

How to make FileReader work with Angular2!!

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

I try to us

Answer 1

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

@View({
  template:`
    

      Select file:
      
    
  `
})

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.