RxJS mergeMap: Inner Observable does not get executed

Question

I want to upload multiple files. Before the upload can happen, I need to POST a request which returns a personId so I can link this personId to my upload files in the backend.

The postOnboardingRequestDto$ creates a record but the files are not saved. The postSingleFormData$ is not executed. Any help or pointing into the right direction would be much appreciated.

postOnboardingRequestDto$ = (onboardingRequestDto) => this.onboardingService.postOnboardingRequestDto(onboardingRequestDto);
postSingleFormData$ = (personId, formData) => this.httpClient.post<SaveResponse>(`/v2/api/onboarding/person/${personId}/document/DOCUMENT_TYPE`, formData);


  confirmOnboardingRequest() {
    this.onboardingRequestIsSubmitted = true;

    this.postOnboardingRequestDto$(this.onboardingRequestDto).pipe(
      mergeMap((onboardingRequestDto) => from(this.selectedFiles).pipe(
          map(file => {
            console.log(`file - ${file.name}`);
            const formData = new FormData();
            formData.append(file.name, file);
            this.postSingleFormData$(onboardingRequestDto.onboardingPersonId, formData);
          })
        )
      )
    ).subscribe((res) => console.log(`res ${JSON.stringify(res)}`));

  }

Answer 1

Does this work for you?

confirmOnboardingRequest() {
  this.onboardingRequestIsSubmitted = true;

  this.postOnboardingRequestDto$(this.onboardingRequestDto).pipe(
    mergeMap((onboardingRequestDto) =>
      from(this.selectedFiles).pipe(
        map(file => new FormData().append(file.name, file)),
        mergeMap(formData => this.postSingleFormData$(onboardingRequestDto.onboardingPersonId, formData))
      )
    )
  ).subscribe((res) => console.log(`res ${JSON.stringify(res)}`));
}