title: How can I send React post requet with file data to an API?
body: <p>Here I want to register user with image so I want to pass both image and name in my formdata.
  I am able to upload the file using some guideline (I am not good with react) but I am not able to pass the input name with my formdata. which procedure to follow?</p>
  <pre><code>import axios from &quot;axios&quot;;
  import React, { useState, useEffect } from 'react'
  import { LinkContainer } from 'react-router-bootstrap'
  import { Table, Button, Row, Col } from 'react-bootstrap'
  import { useDispatch, useSelector } from 'react-redux'
  
  const UPLOAD_ENDPOINT = &quot;http://127.0.0.1:8000/api/orders/vendor/register/&quot;;
  
  function VendorRegistration() {
    const [file, setFile] = useState(null);
    const [name, setName] = useState(&quot;&quot;);
    const { userInfo } = useSelector((state) =&gt; state.userLogin);
  
    const handleSubmit = async (event) =&gt; {
      event.preventDefault();
      const formData = new FormData();
      formData.append(&quot;avatar&quot;, file);
      formData.append(&quot;name&quot;, name);
     
      const resp = await axios.post(UPLOAD_ENDPOINT, formData, {
        headers: {
          &quot;content-type&quot;: &quot;multipart/form-data&quot;,
          Authorization: `Bearer ${userInfo.token}`,
        },
        
      });
      console.log(resp.status)
    };
  
    
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;h1&gt;React File Upload&lt;/h1&gt;
        &lt;input type=&quot;file&quot; onChange={(e) =&gt; setFile(e.target.files[0])} /&gt;
        &lt;input type=&quot;text&quot; onChange={(e) =&gt; setName(e.target.value)} value={name} /&gt;
        
        &lt;button type=&quot;submit&quot; disabled={!(file &amp;&amp; name)}&gt;
          Upload File
        &lt;/button&gt;
        {resp.status == 200(
        &lt;h1&gt;ok&lt;/h1&gt;
        )
  }
      &lt;/form&gt;
  
      
    );
    
  }
  
  export default VendorRegistration;
  </code></pre>