How to make FileReader work with Angular

0 votes

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?

Sep 8, 2020 in Angular by kartik
• 37,520 points
26,818 views

1 answer to this question.

0 votes

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!!

answered Sep 8, 2020 by Niroj
• 82,880 points

Related Questions In Angular

0 votes
2 answers

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,880 points
29,127 views
0 votes
3 answers

How to load external scripts dynamically in Angular?

Hello kartik, You can use following technique to ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,880 points
71,553 views
0 votes
1 answer

How to have conditional elements and keep DRY with Facebook React's JSX?

Hello @kartik, Let's define a simple helping If component: var If ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
647 views
0 votes
1 answer

How to allow download of .json file with ASP.NET?

Hello @kartik, If you want to manually add ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
2,114 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,880 points
3,133 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,880 points
18,510 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,880 points
3,239 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,880 points
1,268 views
0 votes
1 answer

How do we work with UI-Router in AngularJS?

Hello @kartik,  As you know Ui-Router is more ...READ MORE

answered Feb 11, 2020 in Angular by Niroj
• 82,880 points
711 views
0 votes
1 answer

How to pass a string parameter from angular UI to node.js backend?

Hello Kartik, There are three ways to get ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,880 points
10,768 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP