Angular POST multipart/form-data with application/json & text/csv

Question

PROBLEM

Trying to send a multipart/formdata post request with a file upload and model data in JSON. Not sure why there are not much working references, couldn't make work the ones which are there. Might be doing something wrong as well or making it more complicated too.

REFS TRIED

• uploading-files-and-json-data-in-the-same-request-with-angular-js
• a nice explanation about boundary and multipart
• some so question

QUICK FIDDLE WITH MY TRIES

QUESTION

Somehow json content on my post request payload doesn't seem to contain Content-Type: application/json identified automatically.

Even setting the content-type as undefined/false for the POST didnt work. Need some suggestion on what would be the problem or how to fix this?

NETWORK LOG FOR FIDDLE UPLOAD

Request Headers

Accept:application/json, text/plain, */*
Content-Length:361
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary7NukqN6GtRwugBSJ

Request Payload

------WebKitFormBoundary7NukqN6GtRwugBSJ
Content-Disposition: form-data; name="file"; filename="sample.csv"
Content-Type: text/csv


------WebKitFormBoundary7NukqN6GtRwugBSJ
Content-Disposition: form-data; name="data"

{"name":"a good name","comments":"some comments"}
------WebKitFormBoundary7NukqN6GtRwugBSJ--

Answer 1

Faced the same issue.Try using blob and You can set the type in the blob as application/json. You can initialize the blob with your values and it worked for me.

Answer 2

If you make a "multipart/form-data" request, then automatically, the "application/JSON" header will be left out. You cannot have both in the same request. The two post requests are mutually exclusive.