FileReader onload not within controller scope Angular 2

Question

I'm trying to send a file in chunks to be saved in a database and I'm using FileReader.readAsArrayBuffer() to trigger the onload event. My issue comes into play once I'm in the onload event, the scope of 'this' only contains the FileReader properties and nothing from my class. Even variables defined just before the onload event are not accessible. I was thinking I could try to pass the value of 'this' through as a parameter so I could access my functions, service and variables but I haven't had any success thus far. Has anyone tried anything similar or know if maybe I've reached some sort of limitation?

Thank you for any help

Here's my component class

export class UploadComponent {
title = 'Upload File';
fileData = null;
files = null;
fs;
@Input()
showUpload: boolean;

constructor(fileService: FileService) {
    this.fs = fileService;
}

uploadFile() {
    let temp = document.getElementById("fileToUpload");
    let fr = new FileReader();
    let file = temp.files[0];
    let fb = fr.readAsArrayBuffer(file);

    fr.onload = function(data) {
        this.fs.beginFileUpload(file.name, function(data) {
            let chunkSize = 200000;
            let startIndex = 0;
            let stopIndex = chunkSize;
            let file = data.target.result;
            let fileChunk = null;

            while (startIndex < file.length) {
                if (stopIndex < length) {
                    fileChunk = file.subArray(startIndex, stopIndex);
                    startIndex = stopIndex;
                    stopIndex += chunkSize;
                }
                else {
                    fileChunk = file.subArray(startIndex);
                    startIndex = stopIndex;
                }
                //fs.uploadChunk(fileChunk);
            }
        });

    }

}

}

my component template

<input type="file" [(value)]="fileData" [(files)]="files" id="fileToUpload" />
<input type="button" (click)="uploadFile()" value="Upload File" />

Answer 1

Use () => instead of function() to retain the scope of this

uploadFile() {
    let temp = document.getElementById("fileToUpload");
    let fr = new FileReader();
    let file = temp.files[0];
    let fb = fr.readAsArrayBuffer(file);

    fr.onload = (data) => {
        this.fs.beginFileUpload(file.name, (data) => {
            let chunkSize = 200000;
            let startIndex = 0;
            let stopIndex = chunkSize;
            let file = data.target.result;
            let fileChunk = null;

            while (startIndex < file.length) {
                if (stopIndex < length) {
                    fileChunk = file.subArray(startIndex, stopIndex);
                    startIndex = stopIndex;
                    stopIndex += chunkSize;
                }
                else {
                    fileChunk = file.subArray(startIndex);
                    startIndex = stopIndex;
                }
                //fs.uploadChunk(fileChunk);
            }
        });

    }
}

See also https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions