Learning about the reactive pattern for tracking progress

In order to track the progress of the bulk upload, we can call a very useful operator called finalize. The finalize operator allows you to call a function when the Observable completes or errors out.

The idea is to call the finalize operator and execute a function that will calculate the progress. This way, every time an Observable completes, the progress will get updated. This is what the code will look like:

  counter: number = 0;
  uploadProgress: number=0;  
uploadRecipeImages$ = this.uploadedFilesSubject$.pipe(
    switchMap(uploadedFiles => 
     forkJoin(uploadedFiles.map((file: File) =>
      this.uploadService.upload(this.recipeForm.value.id, 
       file).pipe(
        catchError(errors => of(errors)),
    ...