title: How to uploading file with ReactJS and Axios
body: <p>Using <code>react-bootstrap</code> form for post a file and some data:</p>
  
  <pre><code>&lt;Form
      onSubmit={this.handleSubmit}
  &gt;
      &lt;Form.Group controlId="newTeacher.name"&gt;
          &lt;Form.Label&gt;Teacher Name&lt;/Form.Label&gt;
          &lt;Form.Control
              type="text"
              name="name"
          /&gt;
      &lt;/Form.Group&gt;
      &lt;Form.Group controlId="newTeacher.description"&gt;
          &lt;Form.Label&gt;Description&lt;/Form.Label&gt;
          &lt;Form.Control
              as="textarea"
              rows="3"
              name="description"
              placeholder="Description"
          /&gt;
      &lt;/Form.Group&gt;
      &lt;Form.Group controlId="newTeacher.avatar"&gt;
          &lt;Form.Label&gt;Avatar&lt;/Form.Label&gt;
          &lt;Form.Control
              type="file"
              name="avatar"
          /&gt;
      &lt;/Form.Group&gt;
      &lt;Button
          variant="primary"
          type="submit"
      &gt;Save Teacher&lt;/Button&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>When I try send data with Axios to server:</p>
  
  <pre><code>handleSubmit = (e) =&gt; {
      if (e &amp;&amp; e.preventDefault()) e.preventDefault();
  
      const formData = new FormData(e.target);
  
      const name = formData.get('name');
      const content = formData.get('description');
      const avatar = formData.get('avatar');
  
      const requestBody = {
          name,
          content,
          avatar,
          token: cookie.getItem('token'),
      };
  
      axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
          {
              mode: 'cors',
              headers: 'multipart/form-data'
          }
      ).then(response =&gt; {
          console.log('response:');
          console.log(response);
      }).catch(error =&gt; {
          console.log('reject:');
          console.log(error);
      });
  };
  </code></pre>
  
  <p>When I submit form, this is the what is returned in the console (This is the reject message from Axios.):</p>
  
  <blockquote>
    <p><strong>reject:</strong> TypeError: "name.toUpperCase is not a function"</p>
  </blockquote>
  
  <p>How can I fix it?</p>
  
  <p><strong>Update:</strong>
  This script not work properly.
  I will update this for those who have this problem.</p>
  
  <p>Data must be <code>append</code>:</p>
  
  <pre><code>const requestBody = new FormData();
  requestBody.append("avatar", avatar);
  requestBody.append("name", name);
  requestBody.append("content", content);
  </code></pre>
  
  <p>And <code>multipart/form-data</code> is not necessary. In some cases it has problems with <code>Multer</code>. Also, token should be in the header:</p>
  
  <pre><code>axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
      {
          mode: 'cors',
          headers: {
              'x-access-token': cookie.getItem('token'),
          }
      }
  ).then(response =&gt; {
      // SOME ACTION.
  })
  </code></pre>