How to execute a sequence of http-requests with Angular RXJS?

Question

In my Angular app, while uploading a video, first I have to get the signed Url and then I have to do the post call to this signed url, including the video as payload. And I was doing like that:

uploadImage(bucket: BucketTypes, file: File, customUrl?: string): Observable<IUploadedImage> {
    const formData = new FormData();
    formData.append('file', file);
    let params = {
      entity: bucket,
      fileExtension: file.type
    };
    this.http.get<IUploadedImage>(
      customUrl ? customUrl : assetsUrl.uploadImage(this.baseUrl, bucket),
      {params}
    ).subscribe((response: any)=> {
      let url = response.signedUrl;
      return this.http.post<IUploadedImage>(url, formData);
    });
  }

Later on, I want to subscribe to the uploadImage function. But it is not working.

How can I do that? Can someone please explain? What have I done wrong here?

Can you please tell me if my answer worked?

kellermat
– kellermat

2022-12-31 12:42:16 +00:00
Commented Dec 31, 2022 at 12:42 — kellermat
– kellermat, Commented Dec 31, 2022 at 12:42

kellermat · Accepted Answer · 2022-12-29 12:43:34Z

I suggest to use the switchMap-operator to concatenate your http-requests and to remove the subscription inside the uploadImage()-method:

uploadImage(bucket: BucketTypes, file: File, customUrl?: string): Observable<IUploadedImage> {
    const formData = new FormData();
    formData.append('file', file);
    let params = {
        entity: bucket,
        fileExtension: file.type
    };
    return this.http.get<IUploadedImage>(
        customUrl ? customUrl : assetsUrl.uploadImage(this.baseUrl, bucket),
        {params}
    ).pipe(
        switchMap((response: any) => {
            let url = response.signedUrl;
            return this.http.post<IUploadedImage>(url, formData);
        })
    )
}

Finally, you can just subscribe to the observable returned by the uploadImage()-method:

this.uploadImage(bucket, file, customUrl).subscribe(
    (result: IUploadedImage) => {
        console.log('Result: ', result);
    }
)

Collectives™ on Stack Overflow

How to execute a sequence of http-requests with Angular RXJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related