Angular2 + Typescript + FileReader.onLoad = property does not exist

Question

I am using the FileReader Interface and it’s asynchronous method readAsText() to read a local text file, After that when the onload event is called, I try to read my file, my source code is something like the following:

export class ReadFileComponent {
   text: string;

   readFile(): void {
     let reader=new FileReader();
     reader.onload = function(e) {
        this.text=reader.result;
     }
     reader.readAsText(file);   
   }
}

compilation is failed because Property "text" does not exist on type "FileReader"

I think this is due to the EventListener interface does not accept objects ,

did someone please solve this kind of issue?

thanks guys,

Günter Zöchbauer · Accepted Answer · 2017-01-19 09:07:41Z

61

If you want to use this inside the callback, use an arrow function, otherwise it won't work

reader.onload = (e) => {
    this.text=reader.result;
}

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

edited Jan 19, 2017 at 9:07

answered Jan 19, 2017 at 9:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

da45 Over a year ago

No it works fine with console.log(reader.result), the problem is with "this" means currentTarget property is of type EventTarget and not type of class ReadFileComponent

Günter Zöchbauer Over a year ago

That's why you need to use ()=> instead of function (). Arrow functions ensure this within the callback keeps pointing at the current class.

Suraj Rao Over a year ago

right.. maybe this will clarify it

Charles Robertson Over a year ago

Unfortunately, it seems that the ‘ reader.onload’ part does not work, in production [after ng build — prod]. The reason for this, is that the non Angular version is: reader.onload = function(evt) { } Because this does NOT use an arrow function, the parent context is not passed in. In Angular we need access to the parent context, hence the use of arrow functions. What actually happens, using an arrow function, is that the entire ‘onload’ function is passed to ‘reader.result’.

Charles Robertson Over a year ago

let FileReader: new() => FileReader = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate; let reader = new FileReader(); This allows the event to be passed in to 'onload' correctly, which in turn, allows us to use 'event.target.result'

|

Suraj Rao · Accepted Answer · 2017-01-19 09:05:13Z

4

You are using a regular javascript function here:

 reader.onload = function(e) {
        this.text=reader.result;
     }

The this belongs to the function not your class.

Use arrow function

reader.onload = (e)=> {
            this.text=reader.result;
         }

Or

self = this;
 reader.onload = function(e) {
        self.text=reader.result;
     }

answered Jan 19, 2017 at 9:05

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Collectives™ on Stack Overflow

Angular2 + Typescript + FileReader.onLoad = property does not exist

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related