Apologies for the confusion, please refer to my update below
I have a requirement to link my AngularJS Project with an existing RESTful API. This API uses POST requests that involve uploading a file and submitting form data in a request. However, one of the form inputs needs to be in JSON format under the Content-Type: Application/json.
Upon researching online, I found that I can only use POST with Content-Type: multipart/form-data, where each part does not have a specific MIME type. How do I construct my multipart/form-data with different MIME types for each part using 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--
Useful Resources:
- https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
- REST - HTTP Post Multipart with JSON
- application/x-www-form-urlencoded or multipart/form-data?
Update
I realized I posed the wrong question initially. The actual issue is related to how the server processes the POST request:
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 since figured out the solution to submitting this post request correctly. I will share my answer shortly.
Once again, I apologize for the confusion caused by the initial question.