I am reading the file using filereader and using the base64 to perform some action. I can read the file and get base64 but couldn't use that to make some action. here is my code.

The problem is the code in the line this.addContentAttachment(this.mimeType,this.base64Url) not being executed

getBase64(file: any) {
    var reader:FileReader = new FileReader();
    reader.onload = function (readerEvt: any) {
      var binaryString = readerEvt.target.result;
      this.base64Url = binaryString;
      this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";"));
      this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7);
      this.addContentAttachment(this.mimeType,this.base64Url);
    };

    reader.readAsDataURL(file);

    reader.onerror = function (error) {
      console.log('Error: ', error);
    };

  }

I am reading the file using filereader and using the base64 to perform some action. I can read the file and get base64 but couldn't use that to make some action. here is my code.

The problem is the code in the line this.addContentAttachment(this.mimeType,this.base64Url) not being executed

getBase64(file: any) {
    var reader:FileReader = new FileReader();
    reader.onload = function (readerEvt: any) {
      var binaryString = readerEvt.target.result;
      this.base64Url = binaryString;
      this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";"));
      this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7);
      this.addContentAttachment(this.mimeType,this.base64Url);
    };

    reader.readAsDataURL(file);

    reader.onerror = function (error) {
      console.log('Error: ', error);
    };

  }

• javascript
• typescript
• filereader

Share Improve this question Follow asked Oct 20, 2016 at 4:04 user3154990user3154990 56555 gold badges1313 silver badges2727 bronze badges 3

• 1 It probably fail in the onload callback due to changed context (this). JavaScript natively change the context in callback. In your case in onload this is the same as reader. You have to bind right context. reader.onload = function () { ... }.bind(this); – Misaz Commented Oct 20, 2016 at 4:18
• @Misaz..it worked.. thank you so much – user3154990 Commented Oct 20, 2016 at 4:22
• Another option is to use an arrow function: reader.onload = (readerEvt: any) => { ... } – Aleksey L. Commented Oct 20, 2016 at 4:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

It fails in the onload callback due to changed context (this). JavaScript natively change the context in callback. In your case in onload this is the same as reader. You have to bind right context.

SOLUTION 1 You can bing the right context to passed function by bind method on that function.

getBase64(file: any) {
    var reader: FileReader = new FileReader();
    reader.onload = function (readerEvt: any) {
        var binaryString = readerEvt.target.result;
        this.base64Url = binaryString;
        this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";"));
        this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7);
        this.addContentAttachment(this.mimeType, this.base64Url);
    }.bind(this); // We forced that when function will be called this will be current this.

    reader.readAsDataURL(file);

    reader.onerror = function (error) {
        console.log('Error: ', error);
    };

}

SOLUTION 2 The same would be solved by self variable in parent scope of callback. We use self variable to store right context and then we use it in callback instead of standard ("corrupted" this).

getBase64(file: any) {
    var reader: FileReader = new FileReader();

    var self = this; // create self with right this
    reader.onload = function (readerEvt: any) {
        var binaryString = readerEvt.target.result;
        self.base64Url = binaryString; // using self instead this
        self.mimeType = self.base64Url.substring(self.base64Url.lastIndexOf("data") + 5, self.base64Url.lastIndexOf(";"));
        self.base64Url = self.base64Url.substring(self.base64Url.lastIndexOf("base64") + 7);
        self.addContentAttachment(self.mimeType, self.base64Url);
    };

    reader.readAsDataURL(file);

    reader.onerror = function (error) {
        console.log('Error: ', error);
    };

}

SOLUTION 3 (thanks to @Aleksey L.) TypeScript can automate solution 2 by their own syntax. You can try that and see result in playground, it does the same as described in solution 2, but variable is named _this instead of self.

getBase64(file: any) {
    var reader: FileReader = new FileReader();
    reader.onload = (readerEvt: any) => {
        var binaryString = readerEvt.target.result;
        this.base64Url = binaryString;
        this.mimeType = this.base64Url.substring(this.base64Url.lastIndexOf("data") + 5, this.base64Url.lastIndexOf(";"));
        this.base64Url = this.base64Url.substring(this.base64Url.lastIndexOf("base64") + 7);
        this.addContentAttachment(this.mimeType, this.base64Url);
    };

    reader.readAsDataURL(file);

    reader.onerror = function (error) {
        console.log('Error: ', error);
    };

}