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)

Vickievicksburg

Answer 1

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.

Vickievicksburg

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

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

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. – Dubious

Answer 2

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))
    );

Kleist

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 – Vickievicksburg

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

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

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

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