Reactjs Nodejs file upload ftp via axios

Question

I am trying to upload file using React Dropzone on ftp with Reactjs + AXIOS at front end, Nodejs + connect-multiparty at back end. The problem is when I am sending file via front end using AXIOS, I am not getting the file at server in request. My code to upload file using react-axios is

let data = new FormData()
data.append('file', file)    
var setting = {
    method: 'post',
    url: 'my-server-url',
    data:data,
    headers: {
        'Content-Type': 'multipart/form-data'
    },   
}
var response = axios(setting).then(response => { return response.data })
    .catch(response => response = {
        success: 500,
        message: "Your submission could not be completed. Please Try Again!",
        data: ""
    });

while using postman, everything works fine. Server side api is working. only problem with client side request code.

Any help!!!

Answer 1

This is a very rookie mistake you're making probably because of the fact that you don't understand the way multipart works. For your client-side code to work, ie form-data to be sent back to the backend, you need to:

• Either remove the header and let the browser choose the header for you based on your data type
• Or when using 'Content-Type': 'multipart/form-data' , add a boundary to it

Multipart boundary looks like this,

 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryABCDEFGHIJKLMNOPQRSTUVWXYZ'

Simply doing the following will solve the issue for you as the browser will take care of the headers needed.

axios.post('your-server-url', data).then(....)