title: Make a POST form-data with React to upload an image
body: <p>I am trying to upload an image within my ReactJS service to my NestJS API service, through my API, but it's not working yet. This is the React code:</p>
  <p>First the form:</p>
  <pre><code>&lt;div&gt;
   &lt;input type=&quot;file&quot; name=&quot;urlpromo&quot; value={urlpromo} onChange={this.changeHandler} /&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  </code></pre>
  <p>and the functions:</p>
  <pre><code>changeHandler = (e) =&gt; {
      this.setState({[e.target.name]: e.target.value})
  }
  
  submitBaner = (e) =&gt; {
          var bodyFormData = new FormData();
  
          bodyFormData.append('file', this.state.urlpromo);
          
          let config = {
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'multipart/form-data',
                }
          }
          e.preventDefault()
          console.log(bodyFormData)
          axios.post('http://localhost:3000/images/upload', bodyFormData,config)
      }
  </code></pre>
  <p>The thing is that before I was sending images, only with JSON body, it was working fine, but now with form-data, I cant make it work. This is how I can upload an image with Postman:</p>
  <p><a href="https://i.stack.imgur.com/cL56q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cL56q.png" alt="enter image description here" /></a></p>
  <p>When I try to make it work, the function console log prints this:</p>
  <pre><code>FormData {}__proto__: FormData
  </code></pre>
  <p>What I am doing wrong, how should I work with this form-data?</p>