Can't reference this in typescript

Question

I have a fileupload in my angular2 app, which sends the file as bytearray to a webservice. I use a file reader to create a bytearray, which has an onload-event. In this event I can't reference my uploadService using this.uploadService.

public uploadHandler(event) {
    var reader = new FileReader();
    reader.onload = function() {
        var arrayBuffer = this.result, array = new Uint8Array(arrayBuffer), binaryString = String.fromCharCode.apply(null, array);
        //this.uploadService.DoUpload(binaryString);
    }
    reader.readAsArrayBuffer(event.files[0]);
}

I tried to use the fat arrow, but I can't reference result anymore.

reader.onload = () => {
    //this.result does not exist anymore!
    var arrayBuffer = result, array = new Uint8Array(arrayBuffer), binaryString = String.fromCharCode.apply(null, array);
    this.uploadService.DoUpload(binaryString);
}

onload passes an event object as an argument, so you may check in the documentation whether you can get your "result", which seems to be event.target.result: developer.mozilla.org/en-US/docs/Web/API/FileReader/onload . Alternatively, if you don't want to do that, you can still avoid using the fat arrows for that specific case, keeping the function declaration will effectively keep the "this" of the function declaration, hence you won't get any further problem. — briosheje
– briosheje, Commented Jul 26, 2017 at 9:48
You need to save the lexical scope. As a member declare private myMethod: (anyParam: any) => any; Then inside the constructor you have to implement the method that you can't refer to. — Leonardo Venoso
– Leonardo Venoso, Commented Jul 26, 2017 at 9:50
Besides, event.target.result theorically should be the same as reader.result: in your case, var arrayBuffer = this.result is the same as writing: var arrayBuffer = reader.result, since .result is a readonly property of the FileReader object: developer.mozilla.org/en-US/docs/Web/API/FileReader/result . So you have three ways to solve the issue, this last one is likely the fastest one. — briosheje
– briosheje, Commented Jul 26, 2017 at 9:54

Nicolas Gehlert · Accepted Answer · 2017-07-26 09:50:39Z

3

the fat arrow is the right way to go. and you can also get the result from the reader variable instead of this. so it could look like this

public uploadHandler(event) {
    var reader = new FileReader();
    reader.onload = () => {
        var arrayBuffer = reader.result;
        var array = new Uint8Array(arrayBuffer);
        var binaryString = String.fromCharCode.apply(null, array);
        this.uploadService.DoUpload(binaryString);
    };
    reader.readAsArrayBuffer(event.files[0]);
}

answered Jul 26, 2017 at 9:50

Nicolas Gehlert

3,3031 gold badge26 silver badges47 bronze badges

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

Comments

yurzui · Accepted Answer · 2017-07-26 09:55:50Z

2

I would try it:

reader.onload = (event: any) => {
  console.log(event.target.result); // result should exist
};

edited Jul 26, 2017 at 9:55

answered Jul 26, 2017 at 9:47

yurzui

215k32 gold badges450 silver badges413 bronze badges

3 Comments

abc Over a year ago

Result is not a member of target: Property 'result' does not exist on type 'EventTarget'

briosheje Over a year ago

@Karl: cast it as "any" instead of "EventTarget".

yurzui Over a year ago

@Karl Updated answer

A. Milosavljević · Accepted Answer · 2017-07-26 10:42:29Z

I think this should fix your problem, or at least some approach that looks similar, because you have a problem with this binding.

public uploadHandler(event) {
    var reader = new FileReader();
    var that = this;
    reader.onload = function() {
        var arrayBuffer = this.result, array = new Uint8Array(arrayBuffer), binaryString = String.fromCharCode.apply(null, array);
        that.uploadService.DoUpload(binaryString);
    }
    reader.readAsArrayBuffer(event.files[0]);
}

Collectives™ on Stack Overflow

Can't reference this in typescript

3 Answers 3

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Related