Angular S3 Upload Multipart

s3upload.service.ts

import {Injectable} from '@angular/core'
import {Observable} from 'rxjs'
import {HttpClient, HttpHeaders} from '@angular/common/http'
import {AuthService} from '../auth/auth.service'

export interface PresignResponse {
  url: string
  fields?: PresignFields
}

export interface PresignFields {
  [key: string]: string
}

@Injectable({
  providedIn: 'root'
})
export class S3uploadService {

  constructor(
    private http: HttpClient,
  ) {
  }

  public getUploadLink(file: File, url, cognitoAuth: boolean = false) {
    const fileExtension = file.name.split('.').reverse()[0]
    const body = {
      extension: fileExtension
    }
    if (cognitoAuth) {
      return this.http.post(url, body, {
        withCredentials: true,
      })
    } else {
      return this.http.post(url, body)
    }
  }

  public upload(file: File, url: string, fields: PresignFields): Observable<any> {
    const formData = new FormData()

    // tslint:disable-next-line:forin
    for (const k in fields) {
      formData.append(k, fields[k])
    }
    formData.append('file', file)

    return this.http
      .post(url, formData, {
        /*headers: new HttpHeaders({
          'Content-Type': 'multipart/form-data'
        }),*/
        responseType: 'blob',
        reportProgress: true,
        withCredentials: false,
        observe: 'events',
      })
  }
}