How to Send Axios Multipart File with JSON Body to Springboot

I am working on a react native project, which is leveraging Axios, that hits our Springboot backend.

We have a support endpoint that looks like this:

@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE, produces=MediaType.APPLICATION_JSON_VALUE)public ResponseEntity<Void> sendSupportRequest(@Valid @RequestPart ContactRequest request,@Valid @RequestPart(required = false) MultipartFile[] files) {

where ContactRequest is the Json object and files is the multipart.

Our call from the frontend using axios looks like this:

const form = new FormData();  form.append('request', new Blob([JSON.stringify({    id: data.id,    subject: data.subject,    description: data.description,})], {        type: "application/json"    }));  return axiosClient.post("/support", form, {    headers: {"Content-Type":'multipart/form-data',    },  });

I have added an axios request interceptor that outputs this on a request:

{"adapter": ["xhr", "http"], "baseURL": "http://localhost:8080", "data": {"_parts": [[Array]]}, "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": {"Accept": "application/json", "Content-Type": "multipart/form-data"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/support", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}

I have also set logging level to TRACE and get incoming request for our endpoint:

2023-11-18 14:41:41 2023-11-18T21:41:41.662Z DEBUG 1 --- [nio-8080-exec-3] o.a.coyote.http11.Http11InputBuffer      : Received [POST /support HTTP/1.12023-11-18 14:41:41 Host: localhost:80802023-11-18 14:41:41 Content-Type: multipart/form-data; boundary=4xEz1d1nsHJOHNY2u6sjIEP3r_NSLnRUtkltGdUFEc4v4BS0J4.DyJ--48c8-7f2SK4ysv2023-11-18 14:41:41 Accept-Encoding: gzip, deflate2023-11-18 14:41:41 User-Agent: Expo/2.29.6 CFNetwork/1474 Darwin/23.0.02023-11-18 14:41:41 Connection: keep-alive2023-11-18 14:41:41 baggage: sentry-environment=qa,sentry-public_key=123,sentry-trace_id=4562023-11-18 14:41:41 Accept: application/json2023-11-18 14:41:41 Accept-Language: en-US,en;q=0.92023-11-18 14:41:41 Authorization: Bearer abc.1232023-11-18 14:41:41 Content-Length: 2342023-11-18 14:41:41 sentry-trace: xxx-xxx2023-11-18 14:41:41 2023-11-18 14:41:41 --4xEz1d1nsHJOHNY2u6sjIEP3r_NSLnRUtkltGdUFEc4v4BS0J4.DyJ--48c8-7f2SK4ysv2023-11-18 14:41:41 content-disposition: form-data; name="request"2023-11-18 14:41:41 content-type: application/json2023-11-18 14:41:41 2023-11-18 14:41:41 2023-11-18 14:41:41 --4xEz1d1nsHJOHNY2u6sjIEP3r_NSLnRUtkltGdUFEc4v4BS0J4.DyJ--48c8-7f2SK4ysv--2023-11-18 14:41:41 ]2023-11-18 14:41:41 2023-11-18T21:41:41.666Z DEBUG 1 --- [nio-8080-exec-3] o.a.c.authenticator.AuthenticatorBase    : Security checking request POST /support2023-11-18 14:41:41 2023-11-18T21:41:41.667Z DEBUG 1 --- [nio-8080-exec-3] org.apache.catalina.realm.RealmBase      :   No applicable constraints defined2023-11-18 14:41:41 2023-11-18T21:41:41.668Z DEBUG 1 --- [nio-8080-exec-3] o.a.c.authenticator.AuthenticatorBase    : Not subject to any constraint2023-11-18 14:41:41 2023-11-18T21:41:41.668Z DEBUG 1 --- [nio-8080-exec-3] o.apache.catalina.core.StandardWrapper   :   Returning instance

As you can see, it gets the content-disposition correctly, but there is no body

I have tried following the axios docs here with no luck.

I also stumbled across this stack overflow answer here but was unsuccessful.

Our Insomnia requests work correctly as shown below:.

I have tried removing our consumes tag from the endpoint with also no luck.

Any help would be greatly appreciated as I have been struggling with this for a few days now.