CODEWITHSUNDEEP
angularmultipartform-dataangular-httpclient
heisenberg
heisenberg

Reputation: 1312

Angular8 http client form data upload

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.

aurelia request

angular

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

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

Upvotes: 5

Views: 21862

Answers (2)

heisenberg
heisenberg

Reputation: 1312

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.

Upvotes: 13

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

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

Upvotes: 4

Related Questions