I am currently developing a file upload component that involves checking for the existence of a file before proceeding with the upload process. If the file already exists, the user is given the option to either save as a copy or overwrite the existing file. In cases where the user chooses to save as a copy, the existence check needs to be repeated recursively. This could lead to multiple observables being chained and executed sequentially.
However, I encountered a bug where the observable returned in the expression-function is not being executed, even though it is chained using the concatMap pipe.
I'm puzzled by this unexpected behavior. Can anyone shed light on why this is happening?
The relevant code snippet is shown below:
onDocumentsUploaded(documents: CustomDocument[]) {
console.log(documents)
documents = documents.map(document => {
return {
...document,
fullName: document.name + "." + document.extension
}
});
for (let document of documents) {
this.sub.add(
this.handleUpload(document).subscribe()
);
}
}
private handleUpload(document: CustomDocument): Observable<CustomDocument[]> {
return this.documentService.checkIfExists(document).pipe(
concatMap(exists => this.expression(document, exists))
);
}
private expression(document: CustomDocument, exists: boolean): Observable<CustomDocument[]> {
let subject$ = new Subject<CustomDocument[]>();
if (exists) {
this.confirmationService.confirm({
header: this.translate.instant("documentUpload.confirmation.header"),
message: this.translate.instant("documentUpload.confirmation.message", { fileName: "'" + document.fullName + "'" }),
icon: 'pi pi-info-circle',
accept: () => {
subject$.pipe(
concatMap(_ => this.handleUpload({
...document,
name: document.name + " (Copy)",
fullName: document.name + "(Copy)" + "." + document.extension
}).pipe(
tap(x => console.log("handleUpload"))
))
);
},
reject: () => {
subject$.pipe(
concatMap(_ => this.documentService.upload(document))
);
}
});
return subject$.asObservable();
}
else {
return this.documentService.upload(document);
}
}