Angular HTTP failure during parsing while using formdata

Issue

Im trying to send a put request of an image. This is my code:

  uploadProfileImage(file: File): Observable<any> {
const token = this.cookieService.get("Authorization");

const httpHeaders = new HttpHeaders();
httpHeaders.set('Authorization', `Bearer ${token}`);
httpHeaders.append('Content-Type', 'multipart/form-data');

let formData: FormData = new FormData();
formData.set('file', file, file.name);


return this.http.put(API_USERS_URL + "/set/profilePicture", formData, {
  headers: httpHeaders,
  responseType: 'text'
});
}

However my response that I recieve is following:

name = "HttpErrorResponse"
message = "Http failure during parsing for http://localhost:8081/api/files/profileImage"
error = Object {error: SyntaxError: Unexpected token '�', "�PNG\r\n\n"... is not valid JSON\n at JSON.parse ...

Setting the responseType does not seem to resolve my issue.

Solution

Even though I did not find a fix, I solved my problem by using Js fetch.

var myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${token}`);
var formdata = new FormData();
formdata.append("file", file, "");

var requestOptions: RequestInit = {
  method: 'PUT',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("http://localhost:8081/api/files/set/profilePicture", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Answered By - Max