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.