RNFetchBlob.fetchBlobForm failed to create request body

[hstoebel]

React-Native: 0.46.3
RNFB: 0.10.6

I am trying to upload a selected image from the camera roll using react-native-image-picker. The following works fine on Android but on ios I get warning: Error: RNFetchBlob.fetchBlobForm failed to create request body. Any idea what I'm doing wrong?

    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.warn('User cancelled image picker');
      }
      else if (response.error) {
        console.warn('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.warn('User tapped custom button: ', response.customButton);
      }
      else {

        RNFetchBlob.fetch('POST', 'http://12.34.56.78:3000/upload', 
          {'Content-Type' : 'multipart/form-data'}, 
          [
            { name : 'from_device', filename : 'from_device.png', type:'image/png', data: RNFetchBlob.wrap(response.uri)},
          ]
        ).then((resp) => {
          console.warn(resp);
        }).catch((err) => {
          console.warn(err);
        })

[wkh237]

@jstoebel , I'd like to know how is the image's URI look like, perhaps it's caused by #287 .

[hstoebel]

@wkh237 I took a look at response.uri in the console and here's what I got:

console.warn(response.uri);
// file:///Users/user_name/Library/Developer/CoreSimulator/Devices/C360DD7C-D60…C30-D5757191483B/Documents/images/E858BC4A-2B68-4FFC-9103-8A9081EDBA08.jpg

console.warn(RNFetchBlob.wrap(response.uri));
// RNFetchBlob-file://file:///Users/stoebelj/Library/Developer/CoreSimulator/D…C30-D5757191483B/Documents/images/E858BC4A-2B68-4FFC-9103-8A9081EDBA08.jpg

Is the problem something to do with the repeated file:// in the wrapped uri? Sorry if there is something I'm missing.

[wkh237]

@jstoebel , perhaps that's exactly what we're going to do in #387, please try to stripe file:// on IOS.

[antondomratchev]

@wkh237 Were you able to track down what is the root cause of the issue? I would like to help out by making a PR to fix this issue.

[wkh237]

Because IOS file system does not recognize the file:// URI in the native, so you will need to strip that manually, this is what React Native used to behave in 0.2x. Well, I have to say this is confusing, will fix it once I have time.

[isAlmogK]

I'm having the same issue and removing file:// from the URL does nothing and I'm still getting the same error

let cleanUri =  string_.ltrim(newPhoto.uri, "file:///");
console.log(cleanUri) 

RNFetchBlob.fetch('POST', 'https://api.claudia.constructioncloud.io/teams/' +selectedTeam.id+ '/photos', {
                    Authorization :  `JWT ${accessToken}`,
                    'Content-Type' : undefined, //'multipart/form-data',
                }, [
                    // part file from storage
                    { name : 'file', filename : 'avatar-foo.png', type:'image/jpg', data: RNFetchBlob.wrap(cleanUri)},
                ]).then((resp) => {
                    console.log(resp);
                }).catch((err) => {
                    console.log(err);
                })

[isAlmogK]

I was able to debug this I had the following setting for options under image picker

// Options for photos and videos
const options = {
    title: 'Select',
    noData:true,
    mediaType:'mixed',
    storageOptions: {
        skipBackup: true,
        path: 'construction cloud'
    }
};

path: 'construction cloud'
was casuing my issue, I just changed it to path: 'construction-cloud'

[Nealyang]

I have this same issue

[lll000111]

@Nealyang What issue? I see two issues above and both seem to have been addressed. Did you try what helped the others?