title: React sending array of objects as form Data
body: <p>I have currently created a nodejs api where a user can send data about their career. They can send text and an uploaded image.</p>
  <p>The data is sent as follows and I have been successful with sending via postman</p>
  <pre><code>{
      &quot;employee&quot;: &quot;user&quot;,
      &quot;positionHeld&quot;: [{
          &quot;yearPostitionHeld&quot;: &quot;1995 - 2000&quot;,
          &quot;positionHeldTitle&quot;: &quot;Manager&quot;
      },
      {
          &quot;yearPostitionHeld&quot;: &quot;2000 - Present&quot;,
          &quot;positionHeldTitle&quot;: &quot;Assocaite Manager&quot;
      }],
      &quot;address&quot;: &quot;Company Address&quot;,
      &quot;responsibilities&quot;: [&quot;Responsibility 1&quot;, &quot;Responsibility 2&quot;, &quot;Responsibility 3&quot;]
  }
  </code></pre>
  <p>I have created a front end page with ReactJS so the user can send the data as above by filling in input fields.</p>
  <p>I set the user input via the useState Hook</p>
  <pre><code>const [formData, setFormData] = useState({
      companyName: &quot;&quot;,
      year: &quot;&quot;,
      positionHeld: [
        {
          positionHeldYear: &quot;&quot;,
          positionHeldTitle: &quot;&quot;,
        },
      ],
      address: &quot;&quot;,
      responsibilities: &quot;&quot;,
    });
  </code></pre>
  <p>via an onChange function</p>
  <pre><code>const onChange = (e) =&gt; {
      setFormData({ ...formData, [e.target.name]: e.target.value });
    };
  </code></pre>
  <p>I also hanle the file upload</p>
  <pre><code>const [fileData, setFileData] = useState();
  
  const handleFilechange = (e) =&gt; {
      setFileData(e.target.files[0]);
    };
  </code></pre>
  <p>I first tried to send the data as the <code>formData</code> but the file/image always appeared in req.body and not req.file and therefore I was unable to obtain the file path.</p>
  <p>As a solution to the file issue I then create a new formData <code>const completeFormData = new FormData();</code> and appending this</p>
  <pre><code>const year = formData.positionHeldYear;
      const title = formData.positionHeldTitle;
      setFormData({...formData, positionHeld: {positionHeldYear: year, positionHeldTitle: title}})
  
  completeFormData.append(&quot;companyName&quot;, formData.companyName);
      completeFormData.append(&quot;year&quot;, formData.year);
      completeFormData.append(&quot;positionHeld&quot;, formData.positionHeld); // this needs to send the array of objects
      completeFormData.append(&quot;address&quot;, formData.address);
      completeFormData.append(&quot;responsibilities&quot;, formData.responsibilities);
      completeFormData.append(&quot;image&quot;, fileData);
  
  </code></pre>
  <p>I am unsure if it is possible to send an array of objects as the new FormData such as the</p>
  <pre><code>&quot;positionHeld&quot;: [{
          &quot;yearPostitionHeld&quot;: &quot;1995 - 2000&quot;,
          &quot;positionHeldTitle&quot;: &quot;Manager&quot;
      },
      {
          &quot;yearPostitionHeld&quot;: &quot;2000 - Present&quot;,
          &quot;positionHeldTitle&quot;: &quot;Assocaite Manager&quot;
      }],
  
  </code></pre>
  <p>When creating the new form data as above when the req.body comes to the backend the <code>positionHeld</code> displays as <code>positionHeld: [object, Object]</code> when doing a console log</p>
  <p>How is it best to manage sending data with nest array of object strings and image uploads?</p>
  <p>I might have gone down the wrong route with this, so hoping someone can point me in the right direction to send body and a file to confirm as my object</p>
  <pre><code>{
      &quot;employee&quot;: &quot;user&quot;,
      &quot;positionHeld&quot;: [{
          &quot;yearPostitionHeld&quot;: &quot;1995 - 2000&quot;,
          &quot;positionHeldTitle&quot;: &quot;Manager&quot;
      },
      {
          &quot;yearPostitionHeld&quot;: &quot;2000 - Present&quot;,
          &quot;positionHeldTitle&quot;: &quot;Assocaite Manager&quot;
      }],
      &quot;address&quot;: &quot;Company Address&quot;,
      &quot;responsibilities&quot;: [&quot;Responsibility 1&quot;, &quot;Responsibility 2&quot;, &quot;Responsibility 3&quot;]
  }
  </code></pre>