How to Register for / Listen to upload complete events #251

New Issue

2016-06-10T09:37:21Z

z424brave commented

2016-06-10 09:37:21 +00:00

(Migrated from github.com)

Hi

I would like to use this component but I am struggling to see how to register to listen for the onComplete or onSuccess events.

It appears that the file-drop.directive is emitting events using the Angular2 EventEmitter which should be ok to listen for. However the file-uploader.class component is not doing this and its not clear to me how we can listen for a successful/ failed upload and react accordingly.

I may be missing something obvious so perhaps a quick explanation or simple example would explain.

Or should I just be using this code as a basis for my own code and extend the classes where I need to add extra functionality ?

Hi I would like to use this component but I am struggling to see how to register to listen for the onComplete or onSuccess events. It appears that the file-drop.directive is emitting events using the Angular2 EventEmitter which should be ok to listen for. However the file-uploader.class component is not doing this and its not clear to me how we can listen for a successful/ failed upload and react accordingly. I may be missing something obvious so perhaps a quick explanation or simple example would explain. Or should I just be using this code as a basis for my own code and extend the classes where I need to add extra functionality ?

👍 7

simonaco commented

2016-06-12 11:52:15 +00:00

(Migrated from github.com)

One way that you could listen for the upload complete events is by adding the listener in the ngOnInit method of your component like this:

ngOnInit() { 
        this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
            console.log("item uploaded" + response);
        };
    }

This means that your component needs to implement OnInit. Not sure if this is the best way though. Any other ideas?

One way that you could listen for the upload complete events is by adding the listener in the ngOnInit method of your component like this: ``` ngOnInit() { this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => { console.log("item uploaded" + response); }; } ``` This means that your component needs to implement OnInit. Not sure if this is the best way though. Any other ideas?

👍 12 🎉 2 😆 2

jasonroyle commented

2016-06-12 17:27:38 +00:00

(Migrated from github.com)

I stumbled on this to begin with too but @simonaco is correct, you need to redefine the functions yourself, though I'm not sure why you would have to implement OnInit. If you don't require details of the completed upload or you want to fire something off when the entire queue of files have completed you can use:

public uploader: FileUploader;
constructor() {
  this.uploader = new FileUploader({
    url: `${api}/files`
  });
  this.uploader.onCompleteAll = () => {
    console.log('complete');
  };
}

I stumbled on this to begin with too but @simonaco is correct, you need to redefine the functions yourself, though I'm not sure why you would have to implement `OnInit`. If you don't require details of the completed upload or you want to fire something off when the entire queue of files have completed you can use: ``` public uploader: FileUploader; constructor() { this.uploader = new FileUploader({ url: `${api}/files` }); this.uploader.onCompleteAll = () => { console.log('complete'); }; } ```

👍 15 🎉 1

hxlniada commented

2016-07-09 10:53:37 +00:00

(Migrated from github.com)

+1

Sispheor commented

2017-01-31 14:57:50 +00:00

(Migrated from github.com)

thx @jasonroyle . There is also a method to catch errors?

jasonroyle commented

2017-01-31 15:27:15 +00:00

(Migrated from github.com)

@Sispheor looks like onErrorItem is what you're after. To find the full list have a look at the file uploader class.

@Sispheor looks like [onErrorItem](https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts#L236) is what you're after. To find the full list have a look at the [file uploader class](https://github.com/valor-software/ng2-file-upload/blob/development/src/file-upload/file-uploader.class.ts).

Sispheor commented

2017-01-31 15:33:09 +00:00

(Migrated from github.com)

Thank you !
I was looking for a doc on the web site. But reading the class itself is not bad too after all :)

Thank you ! I was looking for a doc on the web site. But reading the class itself is not bad too after all :)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#251