Callback or Promise #546

New Issue

2016-12-28T00:08:38Z

rrubio commented

2016-12-28 00:08:38 +00:00

(Migrated from github.com)

How do we get a call back within a component.

On upload of file I would like to access if success or error. On success, get filename and on error get error description.

This is what i have current (works great - thank you)

`export class UploadComponent implements OnInit {

public uploader: FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;

constructor() {

}

ngOnInit() {
}

public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}

public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}

}
`

How do we get a call back within a component. On upload of file I would like to access if success or error. On success, get filename and on error get error description. This is what i have current (works great - thank you) `export class UploadComponent implements OnInit { public uploader: FileUploader = new FileUploader({url: URL}); public hasBaseDropZoneOver:boolean = false; public hasAnotherDropZoneOver:boolean = false; constructor() { } ngOnInit() { } public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; } public fileOverAnother(e:any):void { this.hasAnotherDropZoneOver = e; } } `

retrospectacus commented

2017-01-03 19:58:30 +00:00

(Migrated from github.com)

You can hook into various events, something like this;

ngOnInit() {
  this.uploader.onSuccessItem = (item:FileItem, response:string, status:number, headers:ParsedResponseHeaders) => {
    console.log("onSuccessItem " + status, item);
  }
}

See here for various events you can hook into.
https://github.com/valor-software/ng2-file-upload/blob/development/components/file-upload/file-uploader.class.ts#L203
Regards,

You can hook into various events, something like this; ``` ngOnInit() { this.uploader.onSuccessItem = (item:FileItem, response:string, status:number, headers:ParsedResponseHeaders) => { console.log("onSuccessItem " + status, item); } } ``` See here for various events you can hook into. https://github.com/valor-software/ng2-file-upload/blob/development/components/file-upload/file-uploader.class.ts#L203 Regards,

👍 4

rrubio commented

2017-01-10 00:36:40 +00:00

(Migrated from github.com)

Thank you! i'll give it a whirl :-)

YeomansIII commented

2017-02-07 20:00:46 +00:00

(Migrated from github.com)

@retrospectacus Do you know how I can get access to my this context from inside that event function? Since it isn't a callback, it seems like the function is not running in my components context, but in the FileUploader's context. Therefor I do not have access to any of my component's variables or functions.

@retrospectacus Do you know how I can get access to my `this` context from inside that event function? Since it isn't a callback, it seems like the function is not running in my components context, but in the FileUploader's context. Therefor I do not have access to any of my component's variables or functions.

retrospectacus commented

2017-02-07 20:11:32 +00:00

(Migrated from github.com)

You can create a reference to this outside of the function. It is a fairly common hack around these kind of issues and is usually called self:

ngOnInit() {
  const self = this;
  this.uploader.onSuccessItem = (item:FileItem, response:string, status:number, headers:ParsedResponseHeaders) => {
    console.log("onSuccessItem " + status, item);
    self.handle(response);
  }
}
handle(r) {
  console.info("handler ran", r);
}

HTH

You can create a reference to `this` outside of the function. It is a fairly common hack around these kind of issues and is usually called `self`: ``` ngOnInit() { const self = this; this.uploader.onSuccessItem = (item:FileItem, response:string, status:number, headers:ParsedResponseHeaders) => { console.log("onSuccessItem " + status, item); self.handle(response); } } handle(r) { console.info("handler ran", r); } ``` HTH

👍 4

YeomansIII commented

2017-02-07 20:15:20 +00:00

(Migrated from github.com)

Thank you, that will work. But shouldn't these events be handled with observables and not hacks? I can work on a solution and make a pull request if you are down with that. Should also add these events to the documentation.

👍 2

retrospectacus commented

2017-02-07 21:11:56 +00:00

(Migrated from github.com)

This package doesn't seem to be using Observables, I'm not sure if there is a reason for that (reduce dependencies?). I am not a maintainer but they do seem to be open to pull requests. I submitted one recently that was merged.

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#546