title: React Axios: Upload Multiple Images using FormData()
body: <p>I'm trying to upload files to the back-end. but it fails</p>
  
  <p>Basically I want to upload 11 images at the same time.</p>
  
  <p>At first I do this</p>
  
  <pre><code>    const title, image1, image2, ... = this.state;
      axios.post(`myapi`, {title, image1, image2})
  </code></pre>
  
  <p>Here is my state of image 1:</p>
  
  <p><a href="https://i.stack.imgur.com/l8puO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8puO.png" alt="enter image description here"></a></p>
  
  <p>It returns an error of 422 "the given data was invalid"; "image_1": The image field is required.</p>
  
  <p>After several reads online, I found out that to upload and image, you have to use formData. So I tried doing this</p>
  
  <pre><code>const title = this.state.title;
  
  const formData = new FormData();
  formData.append('image_1', this.state.image_1);
  formData.append('image_2', this.state.image_2);
  ...
  axios.post(`myapi`, {title, formData})
  </code></pre>
  
  <p>I still get the same 422 error,</p>
  
  <p><a href="https://i.stack.imgur.com/SQPld.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SQPld.png" alt="enter image description here"></a></p>
  
  <p>tried to console.log the formData</p>
  
  <pre><code>for (var fd of formData) {
    console.log(fd);
  }
  </code></pre>
  
  <p>the results indicate the formData has been appended well. But somehow i could not upload it because it is "invalid data"</p>
  
  <p><a href="https://i.stack.imgur.com/2dKPv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2dKPv.png" alt="enter image description here"></a></p>
  
  <p>Thanks for the help!</p>