How to execute angular http calls in order

I have to make a couple of optional calls to upload files to get ids before I can send a post to a different route with those file ids.

const body = ...

const updateFile1Reference = map((file: File | null) => {
if (file) {
body.file1 = { id: file.id }
}
return body
})

const uploadFile1 = body.file1 ?
this.fileService.upload(body.file1).pipe(updateFile1Reference) :
of(body)

const updateFile2Reference = map((file: File | null) => {
if (file) {
body.file2 = { id: file.id }
}
return body
})

const uploadFile2 = body.file2 ?
this.fileService.upload(body.file2).pipe(updateFile2Reference) :
of(body)

const update = this.service.update(body)

return of(body).pipe(
switchMap(() => uploadFile1),
switchMap(() => uploadFile2),
switchMap(() => update)
)


However I am seeing the update run before the file uploads.

Continue reading...