CODEWITHSUNDEEP
jsonangularjspostfile-uploadmultipartform-data
raksja
raksja

Reputation: 4039

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

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

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

Upvotes: 6

Views: 6585

Answers (2)

user2038804
user2038804

Reputation: 11

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.

Upvotes: 0

Kevin Korir
Kevin Korir

Reputation: 3

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.

Upvotes: -1

Related Questions