title: How to use Axios.post() in a post request containing a json object request-body and a multipart form data (MP4)
body: <p>Hi I Was wondering how I can send a a single axios post request containing a json object as the request body and also multipart form data (Mp4 file).<br />
  In my example I want to send 'details' and 'file'. I have tried sending details and file as 2nd and 3rd arguments to the axios.post() method but from what I can tell axios.post only accepts 2 args.
  I have also tried appending the details and then the file, to the form data, but this does not work either.</p>
  <p>If I split these into 2 seperate post calls, it works fine, but my application requires these to happen together.</p>
  <p>I am getting the following error in my spring console:
  [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryqKyZ0R2SyFeDNCVp;charset=UTF-8' not supported]</p>
  <p>Here is the error in my web dev tools console:
  xhr.js:210 POST http://localhost:9191/api/123/file/upload 415</p>
  <p>Id really appreciate any suggestions</p>
  <pre><code>const FileUpload = () =&gt; {
  
      const [file, setFile]= useState(null)
      const[details, setDetails] = useState({consent:false, 
                                  idConfirmed:false, 
                                  label:&quot;&quot;, 
                                  roundId:&quot;&quot;})
  
      const changeHandler=(e)=&gt;{
          
          setFile(e.target.files[0]);
          setDetails(prevDetails=&gt;({
              ...prevDetails,
              consent:true,
              idConfirmed:true,
              label:&quot;test_Label&quot;
          }));
      };
  
      const handleSubmission=(e)=&gt;{
              e.preventDefault();
  
                      const data = new FormData();
  
                      data.append(&quot;file&quot;, file)
                      data.append(&quot;file&quot;, details)
  
                      console.log(&quot;Data: &quot;, data)
  
  
                      axios.post(`${process.env.REACT_APP_URL_NEW_ROUND_VID}/123/file/upload`, data,
                      {
                          headers:{
                            &quot;Content-Type&quot;:&quot;multipart/form-data&quot;
                          }
                        })
                      .then(res=&gt;{
                      console.log(&quot;Data: &quot;,res.data)
                      console.log(&quot;success&quot;)
              })
  
  
              .catch((e)=&gt;{
                  console.log(&quot;Error&quot;, e)
              })
              //})
          };
  </code></pre>
  <p>Here is my rest end point in Springboot:</p>
  <pre><code>@PostMapping(
     path = &quot;{patientId}/file/upload&quot;,
              consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
              produces = MediaType.APPLICATION_JSON_VALUE)
     public void addWardRound(@PathVariable(&quot;patientId&quot;) String patientId,
                                @RequestParam(&quot;file&quot;) MultipartFile file,
                                @RequestBody WardRequest wardRequest){
        WardRoundService.isFileEmpty(file);
        WardRound round = service.saveRound(wardRequest);
        String roundId = round.getRoundId();
        service.uploadVid(patientId, roundId, file);
     }
  </code></pre>