Accessing the value of an Observable variable without triggering the assigned function to run again

Question

Accessing the value of an Observable variable without triggering the assigned function to run again

Currently, I have a function in my Angular component that is executed whenever I need to upload a list of files.

I aim to monitor the upload progress to empty the file list and keep track of the upload progress for a progress bar display.

The issue I am facing is that when I access the value of uploadProgress, it triggers

this.pictureService.upload(this.selectedFiles)

twice, resulting in the files being uploaded twice.

This is how my current function looks like:

uploadImages() {
  // Upload picture and save progress as an observable
  const uploadProgress: Observable<HttpEvent<HttpUploadProgressEvent>> = this.pictureService.upload(this.selectedFiles);

  // Show snackbar with observable for progress bar
  this.snackBar.openFromComponent(UploadProgressComponent, {
    data: { uploadProgress },
  });

  // Wait for the upload to finish and then reset selected files and preview URLs
  uploadProgress.subscribe((event: HttpUploadProgressEvent) => {
    if (event.loaded === event.total && event.loaded !== undefined) {
      this.selectedFiles = null;
      this.previewUrls = [];
    }
  });
}

angular typescript rxjs observable angular7

Answer 1

Answer №1

Each time you invoke .subscribe, the observable is triggered (refer to this link).

If you are using this within the openFromComponent function, it's advisable not to call .subscribe again. You can use a method like this instead:

uploadImages() {
// Upload picture and track progress with observable
const uploadProgress: Observable<HttpEvent<HttpUploadProgressEvent>> = this.pictureService.upload(this.selectedFiles);

// Generate snackbar with observable for progress bar
this.snackBar.openFromComponent(UploadProgressComponent, {
  data: {
    uploadProgress.pipe(tap((event: HttpUploadProgressEvent) => {
      if (event.loaded === event.total && event.loaded !== undefined) {
        this.selectedFiles = null;
        this.previewUrls = [];
      }
    }))
  }
})

}

Answer 2

Each time you invoke .subscribe, the observable is triggered (refer to this link).

If you are using this within the openFromComponent function, it's advisable not to call .subscribe again. You can use a method like this instead:

uploadImages() {
// Upload picture and track progress with observable
const uploadProgress: Observable<HttpEvent<HttpUploadProgressEvent>> = this.pictureService.upload(this.selectedFiles);

// Generate snackbar with observable for progress bar
this.snackBar.openFromComponent(UploadProgressComponent, {
  data: {
    uploadProgress.pipe(tap((event: HttpUploadProgressEvent) => {
      if (event.loaded === event.total && event.loaded !== undefined) {
        this.selectedFiles = null;
        this.previewUrls = [];
      }
    }))
  }
})

}

Answer 3

Answer №2

Following Martin's recommendation, I made a modification by adding .pipe(share()) to the end of my constant, resulting in the desired functionality.

This is how my code now appears:

uploadImages() {
  // Upload image and track progress using an observable
  const uploadProgress = this.imageService.upload(this.selectedFiles).pipe(share());

  // Display snackbar with progress bar based on the observable
  this.snackBar.openFromComponent(UploadProgressComponent, {
    data: { uploadProgress },
  });

  // When upload is complete, reset selected files and preview URLs
  uploadProgress.subscribe((event: HttpUploadProgressEvent) => {
    if (event.loaded === event.total && event.loaded !== undefined) {
      this.selectedFiles = null;
      this.previewUrls = [];
    }
  });
}

Answer 4

Following Martin's recommendation, I made a modification by adding .pipe(share()) to the end of my constant, resulting in the desired functionality.

This is how my code now appears:

uploadImages() {
  // Upload image and track progress using an observable
  const uploadProgress = this.imageService.upload(this.selectedFiles).pipe(share());

  // Display snackbar with progress bar based on the observable
  this.snackBar.openFromComponent(UploadProgressComponent, {
    data: { uploadProgress },
  });

  // When upload is complete, reset selected files and preview URLs
  uploadProgress.subscribe((event: HttpUploadProgressEvent) => {
    if (event.loaded === event.total && event.loaded !== undefined) {
      this.selectedFiles = null;
      this.previewUrls = [];
    }
  });
}

Accessing the value of an Observable variable without triggering the assigned function to run again

Answer №1

Answer №2

Similar questions

The TypeScript compiler does not allow a 'number' type to be assigned to 0, 10, or 20, even when the number itself is 0

Steps for updating a server component after redirectionWould you like to know how

Sort through the files for translation by utilizing a feature within Typewriter

Explore a vast array of items in a collection

Issue with refreshing Angular2 page causing it to not load

Setting up a passthrough for a directory of external resources in Angular

Resolving search box setup problem in PrimeNG dataView

Tips for incorporating multiple services within a single Angular component

Error encountered in Angular testing when component fixture becomes undefined after test execution with subcomponents in version 4.0.0-beta.8

Why is it that my service in the Angular project doesn't fetch data after I make changes and reload the page?

Updating the background color of the side menu in Ionic 4

Showing the Enum name rather than the value in an Angular HTML template for a bound Typescript Interface

What is the best way to communicate an event occurring within the ng-content to the reusable parent component in Angular?

What steps can be taken to resolve the TS5023 error that arises when including "allowImportingTsExtensions" in the tsconfig.json file?

Creating TypeScript Unions dependent on a nested object's property

Discovering the clicked element within a QueryList<ElementRef> in Angular

Troubleshooting Issue: Relative Paths Fail to Work with routerLink in Angular 6

The expiration of the Gitlab CI/CD cache leads to the failure of the build process

What is the best way to make one element's click event toggle the visibility of another element in Angular 4?

When defining a class property in TypeScript, you can make it optional by not providing