Making an axios POST request with multipart/form-data, via React Native Debugger

Question

I am trying to upload a file from React Native to my server. However I am unable to set the 'Content-Type' header to multipart/form-data.

Here's my simple request:

axios({
  uri: 'http://localhost:3000',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data'
  }
});

I am using the React Native Debugger to monitor Network requests.

When I see my Network request inside the Debugger, I see this:

'Content-Type': 'text/plain;charset=UTF-8'

and the Request Payload is simply [object Object]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.7.13 Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36

If I am unable to do this with the React Native Debugger, can anyone suggest any steps to testing via Expo.

Answer 1

Using the latest version of Axios (0.17.1), you make an HTTP request with 'Content-Type': 'multipart/form-data' in the header as follows:

const formData = new FormData();
formData.append('action', 'ADD');
formData.append('param', 0);
formData.append('secondParam', 0);
formData.append('file', new Blob(['test payload'], {
  type: 'text/csv',
}));
axios({
  url: 'http://localhost:5000/api/hello',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  },
});

Two things: I am using url, not uri. Also, please insert your own form data and url. Inspecting the request, which has been replied successfully, this is what I get for the request header:

Answer 2

After hours trying to make it work, I realized that a multipart/form-data needs a boundary that is generated dynamically depending on the amount of data that is being sent.

Here is the code that works for me:

    const data = new FormData();
    data.append('field_name', 'field_pictures');
    data.append('files[file]', fs.createReadStream(filepath), filename);
    const headers = {
        'Content-Type': 'multipart/form-data',
        'Authorization': 'here you can set your headers',
        ...data.getHeaders() // this line is the key
        // you need to mix your headers with those generated by the form data
    }
    return axios.post(url, data, { headers });

Answer 3

You can do simply: axios.defaults.headers.common['Content-Type'] = 'multipart/form-data; boundary=someArbitraryUniqueString';

It will set your headers for sure. However, I have been struggling with form data in React Native for a day and without success. After some experimental aproaches, I found out that everything works without debugger. I don't know why but with debugger, I have been sending empty body to the server.

What's more I didn't need to set headers as it is your question in this post.

Answer 4

According to @JMA answer,

import axios from 'axios';

export async function somefunction(data) {
    const formData = new FormData(); // No imports needed
    for(let key in userData) {
        formData.append(key.toString(), data[key].toString())
    }
    return axios.post(`${ROUTE}`, formData, {
        'Content-Type': 'multipart/form-data',
    });
}

where: data is your payload to what you want to send. somefunction is function that send POST request to ROUTE.