Angular 12 typescript upload files error 415 unsupported media type

Question

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

Fabian Strathaus · Accepted Answer · 2022-11-04 09:50:31Z

3

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',
      }
    );

answered Nov 4, 2022 at 9:50

Fabian Strathaus

3,6401 gold badge8 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 12 typescript upload files error 415 unsupported media type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related