Angular 12 typescript upload files error 415 unsupported media type-CodePudding

I am trying to upload an image with angular 12 and spring boot,

the api on the back side behaves correctly for having tested it with postman.

When I test front side I get this error:

"status: 415, error: "Unsupported Media Type", message: "Content type 'application/json' not supported","

******* here my ts file : *******


host = environment.API_URL;
  private baseUrl = this.host;

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<HttpEvent<any>> {

    const formData: FormData = new FormData();

    formData.append('file', file);
 
    const req = new HttpRequest('POST', `${this.baseUrl}/uploadFile`, formData,{
      reportProgress: true, 
      responseType: 'json'
    });

    return this.http.request(req);
  }

  getFiles(): Observable<any> {
    return this.http.get(`${this.baseUrl}/files`);
  }

}

Thanks for your help

CodePudding user response：

Well, the error message being returned from the server seems to be pretty clear: 'Content type application/json' not supported'.

Usually the content-type for file uploads is multipart/form-data, so you should try to set this as following:

const req = new HttpRequest(
      'POST',
      `${this.baseUrl}/uploadFile`,
      formData,
      {
        headers: new HttpHeaders({ 'content-type': 'multipart/form-data' }),
        reportProgress: true,
        responseType: 'json',
      }
    );