CODEWITHSUNDEEP
angularfile-uploadangular-httpclient
Maurizio Pozzobon
Maurizio Pozzobon

Reputation: 3084

Angular post-request with a multipart form has wrong content type

I'm using the following function to upload a file to a server with the HttpClient of angular 7

  pushFileToStorage(productId, key, file: File): Observable<any> {
    let formdata: FormData = new FormData();

    formdata.append('prod', file);
    let url_ = '/admin5/api/v1/product/images/upload?';
    url_ += "productId=" + encodeURIComponent("" + productId) + "&";
    url_ += "kind=" + encodeURIComponent("" + key);

    return this.http.post(url_,formdata);
  }

The problem I'm having is that the HttpClient sets the wrong content type header (application/json instead of "multipart/form-data") and so the server can't read the file. This is what I see on the developer tools

enter image description here

enter image description here

Any idea on what I'm doing wrong? Thanks

Upvotes: 3

Views: 8604

Answers (4)

Ogunkayode Oluwaseun
Ogunkayode Oluwaseun

Reputation: 31

I just recently learned that if you have an interceptor in your application that's already passing the content-type as application/json, you'd have to add conditions to check when you're sending a request body instance of FormData: (Here's a code snippet of what I did)

if(!(request.body instanceof FormData)) {
    authReq = request.clone({headers: request.headers
      // setting headers as required by the api 
      // on the swagger, a required field that accepts the X-Api-Version
      // so I had to set it here manually
      // also passing the Content-type of the application
      .set('X-Api-Version', '1')
      .set('Content-Type', 'application/json')
      .set('Authorization', `Bearer ${this.token}`)
    });
    return next.handle(authReq);
  }
  authReq = request.clone({headers: request.headers
    .set('X-Api-Version', '1')
    // when sending a FormData Request Body, the content-type is omitted 
    // because the FormData would set the content-type itself 
    // *** not so sure, will do more study *** 
    .set('Authorization', `Bearer ${this.token}`)
  });
  return next.handle(authReq);

So in the request header any FormData type request.body I remove the content-type

Upvotes: 0

Mohammad Sadiqur Rahman
Mohammad Sadiqur Rahman

Reputation: 5523

In my case, I am using FormData also. The reason behind this was the HTTP interceptor as @Maurizio Pozzobon stated in the accepted answer. I am using HTTP Interceptor like below--

enter image description here

Here My interceptor send my token to every http call as

'Content-Type' : 'application/json; charset=utf-8'

Which was creating the wrong content type error. So I need to bypass the interceptor for this type of call. I follow from Here.

I import HttpBackend

enter image description here

Declare HttpClient variable

enter image description here

Declare in the Constructor

enter image description here

Now using this httpclient i request Post api call with formdata carring my file. This Http Post call bypass Http Interceptor. My problem solved this way.

Upvotes: 2

Maurizio Pozzobon
Maurizio Pozzobon

Reputation: 3084

I just found out that the project I'm working on has an HttpInterceptor that is adding a content-type "application/json" by default to any request that doesn't set the content type. So that was the problem.

Upvotes: 15

Евгений Бондаренко
Евгений Бондаренко

Reputation: 479

This is the server header, and the server answers you using json and this is absolutely normal. It’s easier and faster to look for a library to load pictures like this https://www.npmjs.com/package/angular-file-uploader or https://www.npmjs.com/package/angular-file

Upvotes: 0

Related Questions