multipart/form-data request failing in react-native-CodePudding

I get the following error when I set the 'Content-Type' as 'multipart/form-data' in react-native.

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.

CodePudding user response：

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);

CodePudding user response：

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)},
    ],
  );