AXIOS, Mutipart/form-data

Uploading files along with the input form fields using Axios.

Image Credit

👫 Info:

As the community is facing the problem of using Axios to upload the files and JSON data together, this article is intended to address this straight.

🔯 Context:

• Backend to handle the binary array of files and UnMarshaling JSON is done straight by SpringBoot.
• Though the sample client code is using VUE JS, it is an easily extractable TypeScript.

🔯 Points to note:

👉 Client: Form data appending the elements using the same name.

👉 Client: Using Blob and Stringifyng the JSON.

👉 Backend: Using the advanced @RequestPart from Spring Spec.

Backend code.

Client:

Sample model that holds the data to send to backend, usually two way binded with the form.

Sample Request Header how it should look like: (Chrome F12 Developer Tools)

------WebKitFormBoundary8hbLac2P6BKmBHSR Content-Disposition: form-data; name="kitchenPictures"; filename="Screen Shot 2020-11-02 at 11.30.22 AM.png" Content-Type: image/png   
------WebKitFormBoundary8hbLac2P6BKmBHSR Content-Disposition: form-data; name="kitchenPictures"; filename="Screen Shot 2020-11-02 at 11.29.54 AM.png" Content-Type: image/png   
------WebKitFormBoundary8hbLac2P6BKmBHSR Content-Disposition: form-data; name="identityPictures"; filename="Screen Shot 2020-11-02 at 11.29.08 AM.png" Content-Type: image/png   

------WebKitFormBoundary8hbLac2P6BKmBHSR Content-Disposition: form-data; name="publisher"; filename="blob" Content-Type: application/json  {"location":{"addressLine1":"gdfg dfgfd dfgfd Ln","addressLine2":"dgfdf","city":"dfgfd","state":"dfg","country":"dfg","zipCode":"75036"},"kitchenName":"TEST","phoneNumber":"34535","speciality":"TEST","locationType":"Home"} 
------WebKitFormBoundary8hbLac2P6BKmBHSR--

Find my other articles @ my publication: ThinkSpecial