Having trouble sending an HTTP POST request with form-data from Angular app to Cache backend

Question

Vivian Lee · Dec 20, 2021

I'm trying to send an HTTP POST request with form-data from an Angular app to a Cache backend, but my request fails with a 406 Not Acceptable error.

httpRequestHeaders = new HttpHeaders({
  Authorization: 'Bearer ' + sessionStorage.getItem('access_token'),
  Accept: ''
}); 

uploadFile(file: File) {
  const formData: FormData = new FormData();
  formData.append("file", file);
  const req = new HttpRequest("POST", this.postURL, formData, {
    reportProgress: true,
    responseType: "json",
    headers: this.httpRequestHeaders,
  });
  return this.http.request(req);
}

Though I'm sending form-data, if I don't specify the Content-Type in the request header, it gets detected as "application/json" and I get the following message with my 406 error:

ERROR #5770: Object open failed because 'UniqueByRequest' key value of 'document:upload:class:POST::application/octet-stream' was not found

If I do specify Content-Type = "multipart/form-data", I get a 400 Bad Request error and no response/error message. Looking closer into the request headers, I notice that the boundary isn't getting set when I specify the Content-Type and suspect this may be the cause of the 400 error.

Has anyone experienced a similar issue before and know of a workaround?

#REST API #Caché