Cannot wrap a file from the camera roll

[ighormartins]

I'm using react-native-imagepicker to pick an image file and upload it to cloudinary with react-native-fetch-blob.

"react-native": "0.47.1"
"react-native-fetch-blob": "^0.10.8"
"react-native-image-picker": "^0.26.6"

Here is my code:

`

handleUploadImage() {
    this.avatarPickerOptions = {
        title: 'Select an Image to upload',
        mediaType: 'image',
        noData: true
    };
    this.setState({uploadingImage: true})
    
    ImagePicker.showImagePicker(this.avatarPickerOptions, (response) => {
        if (response.didCancel) {
            this.setState({uploadingImage: false})
        } else if (response.error) {
            this.setState({uploadingImage: false})
        } else {
            RNFetchBlob.fetch('POST', 'https://api.cloudinary.com/v1_1/XPTO/image/upload?upload_preset=blabla', {
                'Content-Type': 'multipart/form-data'
            }, [
                {name: 'file', filename: response.fileName, type: 'image/jpeg', data: RNFetchBlob.wrap(response.uri.replace('file://', ''))}
            ])
                .then(resp => resp.json())
                .then(result => {
                    console.log(result)
                    this.setState({uploadingImage: false})
                })
        }
    });
}

`

The response from the imagepicker has this content:
{
fileSize:4389004,
height:3264,
isVertical:true,
uri:"file:///var/mobile/Containers/Data/Application/0CC6D4C0-E542-44F6-8B79-DAD7803C0FA7/tmp/5F785F38-3F21-4527-A59C-1A01CB2AE019.jpg",
width:2448
}

And I'm getting this response from the fetch function:

error: {
message: "Unsupported source URL: RNFetchBlob-file:///var/mo…0FA7/tmp/5F785F38-3F21-4527-A59C-1A01CB2AE019.jpg"
}

[IYTEC]

I had the same issue what I did was convert the image to a base64 like const base64Img = data:image/jpg;base64,${file.data}; the file.data represent the data property from response from image picker. Then I passed the base64Img to data like return RNFetchBlob.fetch('POST', apiUrl, headerProps, [ { name: 'file', fileName: file.fileName, type: file.type, data: base64Img } ]);
Hope it helps.