title: React axios file upload failing - error "Multipart: Boundary not found"
body: <p>My code isn't working as it should, it keeps receiving a 400 from the server and failing to upload. I must be making mistakes in the react component so please can you take a look for me? All's working in Postman, so the backend code seems fine.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const UploadAvatar = () =&gt; {
    const [image, setImage] = useState();
  
    const handleUpload = async (e) =&gt; {
      e.preventDefault();
      const config = {
        headers: {
          &quot;content-type&quot;: &quot;multipart/form-data&quot;,
          Authorization: localStorage.getItem(&quot;token&quot;),
        },
      };
      try {
        const formData = new FormData();
        formData.append(&quot;avatar&quot;, image);
        const response = await axios.post(
          &quot;/users/me/avatar&quot;,
          { formData },
          config
        );
        console.log(response);
      } catch (err) {
        console.error(err.message);
      }
    };
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={handleUpload}&gt;
          Select image to upload:
          &lt;input
            type=&quot;file&quot;
            onChange={(e) =&gt; setImage(e.target.value)}
            name=&quot;fileToUpload&quot;
          /&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Upload Image&quot; name=&quot;submit&quot; /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default UploadAvatar;
  </code></pre>