title: File Upload empty on submit
body: <p>I'm trying to upload an image using Axios inside an object. I can get a file using <code>new FormData()</code> and put it in an object, but submitting the image is empty. How do I upload a file in an object in combination with other JSON data?</p>
  <pre><code>import React, { useState } from 'react';
  import axios from 'axios';
  
  function UploadFiles() {
    const [submitFile, setSubmitFile] = useState({});
  
    const handleChange = e =&gt; {
      setSubmitFile(e.target.files[0]);
    };
  
    const handleSubmit = () =&gt; {
      const formData = new FormData();
      formData.append('document', submitFile);
      formData.append('Answer_name', 'image');
      formData.append('Document', true);
      formData.append('Answer', 'Got some data');
  
      console.log(submitData) // I get formData data
  
      const submitData = {
        UUID_Formulier: '117F994F-F803-7249-91E9-EE1E7B691DFF',
        answers: [formData], // this will be an empty object on calling axios.post
      };
      axios
        .post('/submit', submitData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then(() =&gt; {
          console.log('success');
        })
        .catch(() =&gt; {
          console.log('failed error');
        });
    };
  
    return (
      &lt;div&gt;
        &lt;input type=&quot;file&quot; name=&quot;image&quot; onChange={handleChange} /&gt;
        &lt;button onClick={handleSubmit}&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>The image must be placed in the answers array. When I put FormData in the answers array, it's an empty object. How can I put file formData into a JSON object or array then submit all?</p>
  <p>Using Square bracket notation doesn't create an array but strings, as shown below.
  <a href="https://i.stack.imgur.com/Dofra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dofra.png" alt="enter image description here" /></a></p>