Send data from service to component for upload progress - Angular 9

Question

I would like to show the progress bar in my template, but the uploading is happened through service called through component. I am stuck to send the progress bar from service to component.

Here is my snippet

My file custom.service.ts

import {Injectable} from '@angular/core';

@Injectable({
    providedIn: 'root'
})

export class CustomService {
    constructor() {}

    upload(fileScope, $files, callback) {
        let progress = 1;
        setTimeout(function() {
            progress++;
            // Send progress to the component
        }, 500);
    }
}

Component

this.progress = 0;
this.customService.upload(this.tickFile, file, function (err, data) {
    if (data) {
        // Application logic
    }
}.bind(this));

Any suggestion to fix it? Thanks

https://stackoverflow.com/questions/47034375/angular-file-upload-progress-percentage — Edison Augusthy, Aug 24 '20 at 11:48
@Edison Is there any workaround to achieve from my example. Because I use Amazon S3 to upload — Prabhakaran, Aug 24 '20 at 11:59

score 0 · Answer 1 · answered Aug 24 '20 at 12:17

You can use a service, with a Subject :

export class ProgressService {

  progress: number = 0;
  private emitChangeSource = new Subject<number>();
  changeEmitted$ = this.emitChangeSource.asObservable();

  emitChange(change: any) {
    this.emitChangeSource.next(change);
  }

  constructor() { }
}

In your service:

upload(fileScope, $files, callback) {
    let progress = 1;
    setTimeout(function() {
        progress++;
        // Send progress to the component
        this.progressService.emitChange(progress);
    }, 500);
}

And in your component :

this.progressService.changeEmitted.subscribe(data => this.progress = data);

Send data from service to component for upload progress - Angular 9

1 Answers1