How to uploading file with ReactJS and Axios

Using react-bootstrap form for post a file and some data:

<Form onSubmit={this.handleSubmit} > <Form.Group controlId="newTeacher.name"> <Form.Label>Teacher Name</Form.Label> <Form.Control type="text" name="name" /> </Form.Group> <Form.Group controlId="newTeacher.description"> <Form.Label>Description</Form.Label> <Form.Control as="textarea" rows="3" name="description" placeholder="Description" /> </Form.Group> <Form.Group controlId="newTeacher.avatar"> <Form.Label>Avatar</Form.Label> <Form.Control type="file" name="avatar" /> </Form.Group> <Button variant="primary" type="submit" >Save Teacher</Button> </Form> 

When I try send data with Axios to server:

handleSubmit = (e) => { if (e && 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 => { console.log('response:'); console.log(response); }).catch(error => { console.log('reject:'); console.log(error); }); }; 

When I submit form, this is the what is returned in the console (This is the reject message from Axios.):

reject: TypeError: "name.toUpperCase is not a function"

How can I fix it?

Update: This script not work properly. I will update this for those who have this problem.

Data must be append:

const requestBody = new FormData(); requestBody.append("avatar", avatar); requestBody.append("name", name); requestBody.append("content", content); 

And multipart/form-data is not necessary. In some cases it has problems with Multer. Also, token should be in the header:

axios.post(apiUrl + "/api/v1/admin/teacher", requestBody, { mode: 'cors', headers: { 'x-access-token': cookie.getItem('token'), } } ).then(response => { // SOME ACTION. })