Upload image with HttpClient

Question

Problem

I try to upload an image with angular\'s HttpClient to API Content-Type: multipart/form-data (angular v4+). Is it supported? How to do it?

Answer 1

For me the trick was not to set the content-type to multipart/form-data. But that was done automatically for me.

  
  
    file_upload
    Select Documents
  

Here's my code that uploads multipart/form-data. No need to set the headers.

private setFile(event) {
    let files = event.srcElement.files
    if (!files) {
      return
    }

    let path = `${environment.celoApiEndpoint}/api/patientFiles`
    let data = {"patientData": {
      "uid": "",
      "firstName": "",
      "lastName": "",
      "gender": "Not Specified",
      "dateOfBirth": ""
    }}
    // let headers = new HttpHeaders()
    //   .set('content-type', 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW')
    // let headers = new HttpHeaders().set('content-type', 'multipart/form-data')
    const formData: FormData = new FormData();

    for (let i = 0; i < files.length; i++) {
      formData.append(i.toString(), files[i], files[i].name);
    }
    formData.append("data", JSON.stringify(data));
    this.http.post(path, formData).subscribe(
      (r)=>{console.log('got r', r)}
    )
  }