I have a collection of observables, each representing a file that needs to be uploaded using an HTTP request.
My objectives are:
- To emit an event for each successfully uploaded file, which will be handled in the parent component.
- To notify when all files have been uploaded and all observables are completed.
I began with the following code snippet:
this.isUploading$ = Observable.of(true);
const source$ = Observable.from(files)
.concatMap(file => this.uploadSingleFile(file));
source$.subscribe(data => this.onSuccess.emit(data));
The Observable isUploading$ indicates that the upload process has commenced and is utilized in the HTML to display a spinner based on its state.
The Observable source$ represents the series of file upload operations as it calls the method this.uploadSingleFile(file) and expects an Observable<Response>.
This code effectively uploads all files and triggers this.onSuccess.emit(data) upon completion of each observable.
Now my question is: How can I change the value of this.isUploading$ to false once all tasks are finished?
UPDATE:
I aim to achieve similar functionality without having to set a variable in the onCompleted function. For example:
source$.subscribe(data => this.onSuccess.emit(data),
err => console.log(err),
() => this.isUploading = false );
I wish to extract two observables and subscribe to them at a later convenience.