Question 5210 in Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

multipart/form-data request failing in react-native

I get the following error when I set the ‘Content-Type’ as ‘multipart/form-data’ in react-native.enter image description here

Below is my code –

const formData = new FormData();
formData.append('org_id', org_id);
formData.append('ans', userAns);
formData.append('remark', userRemark);
formData.append('img', userImg);
files.forEach(file => {
  formData.append('files', {
    name: file.fileName,
    type: file.type,
    uri: file.uri,
  });
});
const resp = await multiPartInstance({
  method: 'PUT',
  url: `${apiBaseUrl}/installation/${Iid}/answer/${qid}`,
  data: formData,
});
return Promise.resolve(true);

I am using axios for calling apis. multiPartInstance is an axios instance –

const multiPartAccessToken = async (config: AxiosRequestConfig) => {
  config.headers = {
    Accept: 'application/json',
    access_token: useTokenStore.getState().accessToken,
    'Content-Type': 'multipart/form-data;',
  };
  config.timeout = 30000;
  return config;
};

I’ve tried the above with fetch also but I keep getting the same error. The strangest part is that this request hits the server, server sends a response too but I get this error react-native side. I’ve noticed if I don’t use FormData I don’t get any error. But I need to use FormData as I have to upload image files.

Environment Details –

  • Windows version 21H2 (OS Build 22000.376)
  • react-native 0.66.3
  • react 17.0.2
  • axios ^0.24.0
  • react-native-image-picker ^4.3.0 (used for selecting images)
  • Flipper version 0.99.0

I’ve tried the solutions posted on below forums but they didn’t work for me.

  1. request formData to API, gets “Network Error” in axios while uploading image
  2. https://github.com/facebook/react-native/issues/24039
  3. https://github.com/facebook/react-native/issues/28551
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Somehow react-native-blob-util doesn't give this error. I modified my code as below -

    import ReactNativeBlobUtil from 'react-native-blob-util';

const fileData = files.map(file => {
  return {
    name: 'files',
    data: String(file.base64),
    filename: file.fileName,
  };
});
try {
  const resp = await ReactNativeBlobUtil.fetch(
    'PUT',
    `${apiBaseUrl}/installation/${Iid}/answer/${qid}`,
    {
      access_token: useTokenStore.getState().accessToken,
      'Content-Type': 'multipart/form-data',
    },
    [
      ...fileData,
      // elements without property `filename` will be sent as plain text
      {name: 'org_id', data: String(org_id)},
      {name: 'ans', data: String(userAns)},
      {name: 'remark', data: String(userRemark)},
      {name: 'img', data: String(userImg)},
    ],
  );

  2. 0

    I am as follow and works perfectly:

        const oFormData = new FormData();    
    images.map((val, index) => {
        oFormData.append("image", {
            uri: val.uri,
            type: val.type,
            name: val.fileName
        });
    });
    return axios.post(postServiceUrl, oFormData);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search