CODEWITHSUNDEEP
angulartypescriptrestuploadobservable
Pedro Henrique
Pedro Henrique

Reputation: 191

How execute some code when my rest call is finished with Observable in Angular

I'm uploading file by rest api, I want know how can do something when call is completed.

I try this:

public upload(file: File,url: string) {
  const formdata: FormData = new FormData();
  formdata.append('file', file);
  const req = new HttpRequest('POST', url, formdata, {
    reportProgress: true,
    responseType: 'text'
  });
  return this.http.request(req);
}.

upload() {
  var elem = document.getElementById("dynamic");
  this.importService.create(new ImportFile())
  this.importService.uploadFile(this.currentFileUpload)
    .subscribe({
      next(event) {
        if (event != null) {
          if (event.type === HttpEventType.UploadProgress) {
            elem.style.width = Math.round(100 * event.loaded / event.total) + '%';
          } else if (event instanceof HttpResponse) {
            console.log('File is completely uploaded!');

          }
        }
      },
      complete() { this.finish(); }
    });
}

I expect that execute finish() method when completed and my template receive this changes

Upvotes: 0

Views: 522

Answers (1)

user4676340
user4676340

Reputation:

Try with the finalize operator : 

this.importService.uploadFile(this.currentFileUpload)
  .pipe(finalize(event => this.finish()))
  .subscribe(...);

Documentation

Note that the observables needs to be completed to trigger the operator. Usually HTTP calls are completed, but you never know.

Upvotes: 1

Related Questions