title: Can't send a multipart/form-data from a react view with axios
body: <p>How to send a multipart/form-data from a javascript view to a rails controller?</p>
  <p>I'm trying to make a form able to send a file (image)  to my backend controller, so I am adding this on the headers of my Axios call:</p>
  <pre><code> axios.defaults.headers.common['Content-Type'] = 'multipart/form-data';
  </code></pre>
  <p>I add it within my functional component, anyways checking the network i see :</p>
  <pre><code>Content-Type: application/json;charset=UTF-8
  </code></pre>
  <p>and the parameters received in the controller are empty (for the file)</p>
  <hr />
  <p>I have:</p>
  <pre><code>  const handlePhoto = (e) =&gt; {
      const image = new FormData();
      image.append('photo', e.target.files[0]);
      console.log(&quot;inside habdlephoto&quot;, image.get('photo'))
      const dataSend = Object.assign({} ,data, image.get('photo'));
      setData(dataSend)
    }
  </code></pre>
  <p>which I use in</p>
  <pre><code>                      &lt;Input
                          type=&quot;file&quot;
                          innerRef={register}
                          name=&quot;photo&quot;
                          onChange={handlePhoto}
                          multiple={true}
                        /&gt;
  </code></pre>
  <p>the axios call looks like:</p>
  <pre><code>    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
     }
  
      axios
      .post(&quot;../../../api/v1/products/create.json&quot;, { product: {...data, ...dataRegister} }, config )
  
  </code></pre>