javascript - FileReader onload not within controller scope Angular 2 - Stack Overflow

admin管理员组

文章数量:1379654

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 es 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 ponent 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 ponent template

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

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 es 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 ponent 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 ponent template

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

• javascript
• typescript
• angular

Share Improve this question Follow asked May 9, 2016 at 19:44 user2592413user2592413 6511 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

本文标签： javascriptFileReader onload not within controller scope Angular 2Stack Overflow