title: Unable to send multipart form data to backend using axios from ReactJS
body: <p>I am trying to debug this ReactJS code where no matter what I try the backend doesn't receive any data in the body and the file is undefined. I checked by printing all the data(user and element.files[0]) till the line just before the axios request and all seems to be working fine.</p>
  <p>Just when the request reaches backend, data doesn't show.</p>
  <p>Partial js code:</p>
  <pre class="lang-js prettyprint-override"><code>    async function updateAvatar(element) {
          let data = new FormData();
          // `user` is an object that exists as a state 
          data.append('user', user);
          data.append('file', element.files[0])
          const response = await axios.post(`http://localhost:3001/user/upload_avatar`, data, {
              headers: { &quot;Content-Type&quot;: &quot;multipart/form-data&quot; }
          });
      }
  </code></pre>
  <p>Partial HTML code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;label htmlFor='update-avatar'&gt;&lt;span className='btn btn-outline-primary'&gt;Update&lt;/span&gt;&lt;/label&gt;
  &lt;input id='update-avatar' type={'file'} className='custom-file-upload' onChange={e =&gt; updateAvatar(e.target)} /&gt;
  </code></pre>
  <p>The code was working till yesterday and is not sending data properly since today.</p>
  <p>Does anyone see any issues with the code?</p>