Catching OnErrorItem #497

New Issue

2016-11-17T11:51:26Z

Maskime commented

2016-11-17 11:51:26 +00:00

(Migrated from github.com)

Hi,

I'm trying to use the FileUploader.onErrorItem function to be able to get my response from the server.
Thing is that it seems that when trying to naively use the function as follow :

constructor(private configuration: Configuration) {
        this.fileUploader = new FileUploader({
            url: this.configuration.restApiEndpoint + '/upload',
            headers: this.getUploadHeaders(),
            allowedMimeType: ['text/csv']
        });

            this.fileUploader.onErrorItem = this.errorEventHandler;
}
private errorEventHandler(item: any, response: string, status: number, headers: ParsedResponseHeaders): any {
        let error: IError = JSON.parse(response);
        this.errors = error.errors;
        this.showErrors = true;
        console.log(this.errors.length);
    }

The Handler code is executed outside the Angular Zone which lead to the fact that my showError boolean is not re-evaluated by the template.
Is there any clean way to get an event that I could listen to ?

Thanks for the hard work and all the good advices that you can provide.

Hi, I'm trying to use the FileUploader.onErrorItem function to be able to get my response from the server. Thing is that it seems that when trying to naively use the function as follow : ```typescript constructor(private configuration: Configuration) { this.fileUploader = new FileUploader({ url: this.configuration.restApiEndpoint + '/upload', headers: this.getUploadHeaders(), allowedMimeType: ['text/csv'] }); this.fileUploader.onErrorItem = this.errorEventHandler; } private errorEventHandler(item: any, response: string, status: number, headers: ParsedResponseHeaders): any { let error: IError = JSON.parse(response); this.errors = error.errors; this.showErrors = true; console.log(this.errors.length); } ``` The Handler code is executed outside the Angular Zone which lead to the fact that my `showError` boolean is not re-evaluated by the template. Is there any clean way to get an event that I could listen to ? Thanks for the hard work and all the good advices that you can provide.

Maskime commented

2016-11-17 14:35:26 +00:00

(Migrated from github.com)

Just for the sake of others developers here is a workaround:

constructor(private configuration: Configuration, private ngZone: NgZone) {
    this.fileUploader = new FileUploader({
        url: this.configuration.restApiEndpoint + '/upload',
        headers: this.getUploadHeaders(),
        allowedMimeType: ['text/csv']
    });

    let self = this;

    this.fileUploader.onErrorItem = this.ngZone.run(() => function (item, response, status, headers) {
        let error: IError = JSON.parse(response);
        self.errors = error.errors;
        self.showErrors = true;
        console.log(self.errors.length);
    });
}

The trick is to inject the NgZone in the constructor and use it for the onErrorItem callback.
This is clearly a workaround, the way I see this, but I may not be most qualified to give this advice. The FileUploader should provide relevant events upon those, this way we could bind on it and stay in the Angular Zone.

Just for the sake of others developers here is a workaround: ``` typescript constructor(private configuration: Configuration, private ngZone: NgZone) { this.fileUploader = new FileUploader({ url: this.configuration.restApiEndpoint + '/upload', headers: this.getUploadHeaders(), allowedMimeType: ['text/csv'] }); let self = this; this.fileUploader.onErrorItem = this.ngZone.run(() => function (item, response, status, headers) { let error: IError = JSON.parse(response); self.errors = error.errors; self.showErrors = true; console.log(self.errors.length); }); } ``` The trick is to inject the NgZone in the constructor and use it for the `onErrorItem` callback. This is clearly a workaround, the way I see this, but I may not be most qualified to give this advice. The `FileUploader` should provide relevant events upon those, this way we could bind on it and stay in the Angular Zone.

👍 2 ❤️ 1

bisak commented

2017-03-19 13:44:57 +00:00

(Migrated from github.com)

this.fileUploader.onErrorItem = ((item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any => {
//Handle
});

It worked like that for me. Hope it does the job for you?

``` this.fileUploader.onErrorItem = ((item:FileItem, response:string, status:number, headers:ParsedResponseHeaders):any => { //Handle }); ``` It worked like that for me. Hope it does the job for you?

👍 5 ❤️ 2

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#497