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" />

Günter Zöchbauer · Accepted Answer · 2016-05-09 19:45:49Z

9

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

answered May 9, 2016 at 19:45

Günter Zöchbauer

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

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

1 Comment

user2592413 Over a year ago

That worked, thank you so much! and such a simple solution. thanks for the link, I have some more learnings to do. I'll mark it as answered once the time limit is up haha

Collectives™ on Stack Overflow

FileReader onload not within controller scope Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related