file upload using axios in react

Question

I am uploading a file in React using Axios. When I am doing

alert(values.attachedFile[0]);, it displays:

but when I am sending values.attachedFile[0] in an Axios post request, an empty object is being sent.

const { result } = await axios.post(app.resourceServerUrl + '/file/upload', {
    data: values.attachedFile[0],
    headers: {
        'Content-Type': 'multipart/form-data',
    },
});

You can see the request data being empty:

What is my mistake?

Answer 1

To upload file with axios you need to use FormData:

const formData = new FormData();

// ...

formData.append("data", values.attachedFile[0]);
axios.post(app.resourceServerUrl + '/file/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})