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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gopi Krishna Kancharla

Gopi Krishna Kancharla

Director of Software Engineering @ CapitalOne-Garage