Wrong question asked, see my update below
I need to integrate my AngularJS Project with an existing RESTful API. These API consume POST request which upload a file
, and also submit the form data in a request. Unfortunately, one of the form input requires to be in Content-Type: Application/json
.
After search on the web, I could only POST
with Content-Type: multipart/form-data
in which each of the parts does not have a specific MIME
.
How can I compose my multipart/form-data
with a different MIME
for each parts in Javascript?
POST /api/v1/inventory
Host: localhost:8000
Origin: http://localhost:9000
Content-Type: multipart/form-data; boundary=------border
------border
Content-Disposition: form-data; name="owner"
john doe
------border
Content-Disposition: form-data; name="image"; filename="mybook.png"
Content-Type: image/png
------border
Content-Disposition: form-data; name="items"
Content-Type: application/json
{"name": "Book", "quantity": "12"}
------border--
Relevant References:
Apologize for asking a wrong question. The original problem is that, I can see the server calling the logic something like,
func POST(req):
owner = req.owner // This is string
image = req.image // This is file object
itemQuantity = req.items.quantity // Items is an object with attribute quantity
itemName = req.items.name // Items is an object with attribute name
I have also managed to figure out how to submit such a post request. I will post my answer below.
Once again sorry for asking a wrong question.
According to the documentation of FormData
, you can append a field with a specific content type by using the Blob
constructor:
var formData = new FormData();
formData.append('items', new Blob([JSON.stringify({
name: "Book",
quantity: "12"
})], {
type: "application/json"
}));
After careful observation, it turns out that it will send the part as follows:
Content-Disposition: form-data; name="items"; filename="blob"
Content-Type: text/json
The only alternative, safe from building the whole request yourself is to pass a string value:
formData.append('items', '{"name": "Book", "quantity": "12"}');
This, unfortunately, doesn't set the Content-Type
header.