Angular8 http client form data upload

Question

I'm trying to upload files using the http client and I'm always getting a bad response from the backend. I'm assuming that the problem resides on the request, because apart from that, everything that my request has is exacly the same as the request I am making on aurelia http client.

In general here some information about the request headers from angular:

Request URL: https://*/document/document?name=ecv_template_en.pdf&classification=0
Request Method: POST
Content-Type: application/json
Request payload:
------WebKitFormBoundary1gYAP6XB8f1TQ7RP
Content-Disposition: form-data; name="blobFile"; filename="ecv_template_en.pdf"
Content-Type: application/pdf
------WebKitFormBoundary1gYAP6XB8f1TQ7RP--

And the same request from aurelia http client:

Request URL: https://*/document/document?name=ecv_template_en.pdf&classification=0
Request Method: POST
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydb5u93415NsBfKEz

Now there isn't a request payload but a form data with a blobFile: (binary)

This is the angular code that I'm doing in order to reproduce the call:

const formData = new FormData();
formData.append("blobFile", documentUpload.file);
return this.http
    .post(`${*}/document?name=${name}&classification=${classification}`, 
     formData).pipe(
        map(do stuff))
    );

I've also checked the content of the formData and it's exacly the same both on aurelia request and angular request.

Also the endpoint that I'm calling is the following:

    [HttpPost()]
    public ActionResult Create([FromForm]IFormFile blobFile,
        [FromQuery] string name,
        [FromQuery] ClassificationType classification)

Muhammed Albarmavi · Accepted Answer · 2019-08-15 14:19:02Z

13

Okay, I've found the solution.

Previously my JWT Interceptor had a content-type defined as Content-Type: "application/json" which was always overriding my multipart setter. I've removed that, but it not solved, I started to receive: Missing content-type boundary.

Then I tried to remove this

const httpOptions = {
  headers: new HttpHeaders({
   "Content-Type": "multipart/form-data" // 👈
  })
};

from the request, and It worked. It seems that I can't tell explictely the content-type otherwise I will get this type of messages from the .NET Api. I let the browser handle it like I had previously.

edited Aug 15, 2019 at 14:19

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

answered Aug 15, 2019 at 14:07

heisenberg

1,3126 gold badges17 silver badges31 bronze badges

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

3 Comments

Muhammed Albarmavi Over a year ago

I was going to ask you about if you are use Interceptor 😅😅 , happy that you got you problem solved 👍

Vinay Jadhav Over a year ago

I was in the same situation as you. And the solution given by you worked. :)

Mariano LEANCE Over a year ago

For some weird reason the solution with a spring backend was to remove this header and add formData.append("reportProgress", true);. I tried with both and it doesn't work but if I remove the multipart header it works just fine.

Muhammed Albarmavi · Accepted Answer · 2019-08-15 12:03:39Z

4

try this way , by pass http options for the header

const httpOptions = {
  headers: new HttpHeaders({
   "Content-Type": "multipart/form-data" // 👈
  })
};


const formData = new FormData();
formData.append("blobFile", documentUpload.file);
return this.http
    .post(`${*}/document?name=${name}&classification=${classification}`, 
     formData , httpOptions) // 👈 pass the http options 
    .pipe( 
        map(do stuff))
    );

edited Aug 15, 2019 at 12:03

answered Aug 15, 2019 at 11:57

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

5 Comments

heisenberg Over a year ago

it is setting the header as multipart/form-data but still I'm failing to upload, I keep having a RequestPayload with the following: ------WebKitFormBoundaryuKaI4GxyOkAWNj14 Content-Disposition: form-data; name="blobFile"; filename="ecv_template_en.pdf" Content-Type: application/pdf instead of the formData

heisenberg Over a year ago

This is the backend return: InvalidDataException: Missing content-type boundary

Muhammed Albarmavi Over a year ago

is the api is public so I can try to send post request ?

heisenberg Over a year ago

unfortunately not, but I can test your request if you can share it to me

heisenberg Over a year ago

I've edited the post with two pictures, one with an angular request and another with an aurelia request

Collectives™ on Stack Overflow

Angular8 http client form data upload

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related