RNFetchBlob multipart request builder has found a field without `data` property, the field `null` will be removed implicitly

Question

const formData = new FormData();


for (let i = 0; i < image.length; i++) {
  formData.append("postFile", image[i].data);

}

formData.append("imagesList", null);

console.log("formData..", formData)

rnfetchblob.fetch('POST', `${baseUrl}/fame/saveImage`, {
  Authorization: `Bearer ${token}`,
  otherHeader: "foo",
  'Content-Type': 'multipart/form-data',
}, [
  formData,
]).then((resp) => {
  console.log("response = ", resp)
}).catch((err) => {
  console.log("error = ", err)
})

I have tried too many times but the data is null i even spent full day on react native fetch blob documentation

Answer 1

Try with this function uploadImage

What changes have I made to this function, I change payload and use fetch instead of rnfetchblob.fetch

let uploadImage = async () => {
  const formData = new FormData();
  formData.append('imagesList', null)
  image.forEach((file: any) => {
    formData.append('postFile', {
      name: file?.fileName,
      size: file?.fileSize,
      type: file?.type,
      uri: file?.uri
    });
  });
    let res = await fetch(
      `${baseUrl}/fame/saveImage`,
      {
        method: 'post',
        body: formData,
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'multipart/form-data',
        },
      }
    );
    let responseJson = await res.json();
    if (responseJson.status == 1) {
      alert('Upload Successful');
    }
};