Typescript variable inside file.onload is undefined

Question

  filePhotoValue: any = "xexe";

  sendFile(file) {

    var reader = new FileReader();

    reader.onload = function (e:any) {
      console.log(this.filePhotoValue);
    };

  }

Why filePhotoValue inside reader.onload consoles "undefined" instead of xexe? There is no compilation errors and I'd like to set some value to filePhotoValue inside reader.onload.

Ibrahim · Accepted Answer · 2016-07-20 10:03:28Z

7

While you are inside the onload method, you loose the context of "this" that is outside the method. To fix this you have two solutions: Save the "this" context in another variable:

sendFile(file) {

    var reader = new FileReader();

    var self = this;    

    reader.onload = function (e:any) {
      console.log(self.filePhotoValue);
    };

  }

or bind the current context to the function:

sendFile(file) {

    var reader = new FileReader();

    reader.onload = function (e:any) {
      console.log(this.filePhotoValue);
    }.bind(this);

  }

answered Jul 20, 2016 at 10:03

Ibrahim

2,06216 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Typescript variable inside file.onload is undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related