React Native fetch throws error when posting multipart/form-data

Question

This is how I tried to POST an image as multipart/form-data to server.

var photo = { uri: this.state.avatarSource,
              type: 'multipart/form-data', 
              name: 'photo.jpg', }; 
let formdata = new FormData(); 
formdata.append('attachment',photo); 
fetch(url,
        { method: "POST", 
          headers: { 'Content-Type': 'multipart/form-data' }, 
          body: formdata 
        }).then((response) => response.json()) 
       .catch((error) => { alert("ERROR " + error) }) 
       .then((responseData) => { alert("Succes "+ responseData) }).done();

But it shows an error : Expected dynamic type string but had type object

Answer 1

After 2 days, trying so many things I made the code working with some modifications.

RNFetchBlob.fetch('POST', url, {
  'Content-Type': 'multipart/form-data',
}, [ 
    { name: 'file', filename: 'photo.jpg', type: 'image/png', data: RNFetchBlob.wrap(src) }
  ]) .then((resp) => {
    console.log(resp.text());
  }).catch((err) => {
    console.log(err);
  });

Answer 2

As mentioned in the docs formData.append(name, value, filename);

The value field in it accepts USVString or Blob, since you're passing an object to it therefore it throws an error.

You need to convert your image to blob, append and upload it.

If you've got the base64 of the image, then you can convert it to a blob directly using the fetch api

fetch(base64URL)
.then(res => res.blob())
.then(blob => console.log(blob))

Otherwise you may checkout RN-fetch-blob, their multipart/ formData example.

Answer 3

I slightly modified the solution given by @unknown123. And it worked for me. Here is the solution.

First, install npm package rn-fetch-blob

import RNFetchBlob from 'rn-fetch-blob';

RNFetchBlob.fetch('PUT', url, {'Content-Type': 'multipart/form-data'}, Platform.OS === 'ios' ? RNFetchBlob.wrap(filePath) : `RNFetchBlob-${filePath}`)

Please note, in my case, I had different file paths for IOS and Android devices. We handle it in different ways using rn-fetch-blob

Sample filePath variable data for

1. IOS device -

"/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB67-BB11E045C1DE/tmp/react-native-image-crop-picker/img.jpg"

2. Android device -

"file:///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg"