Upload completed callback #872

New Issue

2017-08-23T19:40:30Z

SuperMariosYoshi commented

2017-08-23 19:40:30 +00:00

(Migrated from github.com)

Hello all, i use this awesome plugin on my angular 4 app and everything works well, but i have one issue that i'm not sure how to fix, so when i finish uploading first item, onSuccessItem callback triggers and i do some logic there, BUT when i upload another file that same callback won't trigger. My question is how to trigger onSuccessItem callback every time when file is uploaded, i don't want to refresh page. My code looks like this.

import { Component } from '@angular/core';
import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload";

@Component({
    selector: 'upload-file',
    template: `
    <input type="file" ng2FileSelect [uploader]="uploader">    
    `,
})
export class UploadFileComponent {
    uploader:FileUploader;
    ngOnInit(): void {
        this.uploader = new FileUploader({
            url: 'http://url.to/upload',
            headers: [{name:'Accept', value:'application/json'}],
            autoUpload: true,
        });
        this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
        this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);
    }

    onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        //this gets triggered only once when first file is uploaded
    }

    onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let error = JSON.parse(response); //error server response
    }
}

Hello all, i use this awesome plugin on my angular 4 app and everything works well, **but** i have one issue that i'm not sure how to fix, so when i finish uploading first item, onSuccessItem callback triggers and i do some logic there, BUT when i upload another file that same callback won't trigger. My question is how to trigger onSuccessItem callback every time when file is uploaded, i don't want to refresh page. My code looks like this. ``` import { Component } from '@angular/core'; import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload"; @Component({ selector: 'upload-file', template: ` <input type="file" ng2FileSelect [uploader]="uploader"> `, }) export class UploadFileComponent { uploader:FileUploader; ngOnInit(): void { this.uploader = new FileUploader({ url: 'http://url.to/upload', headers: [{name:'Accept', value:'application/json'}], autoUpload: true, }); this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers); this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers); } onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { //this gets triggered only once when first file is uploaded } onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { let error = JSON.parse(response); //error server response } } ```

kluch commented

2017-09-18 07:35:39 +00:00

(Migrated from github.com)

Did you manage to get it working? I am sitting with the same problem.

😆 1

mojia commented

2017-09-26 07:22:25 +00:00

(Migrated from github.com)

@SuperMariosYoshi
Did your code work well?
The same problem I meet, waiting for your kind response

@SuperMariosYoshi Did your code work well? The same problem I meet, waiting for your kind response

kluch commented

2017-09-27 11:21:47 +00:00

(Migrated from github.com)

@mojia

I solved mine, the problem with me was I was instantiating a new uploader when I intercept the upload so I can set the url. Removing that solved my problem.

@mojia I solved mine, the problem with me was I was instantiating a new uploader when I intercept the upload so I can set the url. Removing that solved my problem.

adrianfaciu commented

2017-10-01 10:20:00 +00:00

(Migrated from github.com)

Is this still an existing problem ? Or we can close the issue...

😕 1

sangwin commented

2017-10-25 10:11:33 +00:00

(Migrated from github.com)

this.uploader.onSuccessItem returns null in my case with status = 0, Can anyone help me with this? I can see the return response in Chrome network tab.

` this.uploader.onSuccessItem` returns `null` in my case with `status = 0`, Can anyone help me with this? I can see the return response in Chrome network tab.

oauthentik commented

2018-02-17 11:27:06 +00:00

(Migrated from github.com)

I have the same problem i find out the problem occurs when ng webpack dev serve detect file changes
On the assets folder which it happens to be the upload dir and reload to build the new bundle.
I deactivated live reload with ng serve --live-reload false to solve this issue

I have the same problem i find out the problem occurs when ng webpack dev serve detect file changes **On the assets folder which it happens to be the upload dir** and reload to build the new bundle. I deactivated live reload with `ng serve --live-reload false` to solve this issue

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#872