How to solve "File name too long" while uploading local Image to Firestore and Firebase Storage in React Native?

I'm trying to upload local images to Cloud Firestore and Firebase storage.

The PACKAGES I'm using are

• react-native-image-picker to choose an image from local
• rn-fetch-blob to transfer files as blob to Firebase storage

Here's the 2 functions I'm using:

export const uploadPost = async (postImageUri) => {

        return new Promise(async(res, rej) => {

                const fs = RNFetchBlob.fs;
                
                fs.readFile(postImageUri,'hello','base64')
                .then(async (data) => {
                    console.log('data from RNFetchBlob', data);
                    const storageRef = storage().ref(`posts/images`).child(`${data}`);
                    
                    try {
                        storageRef.putFile(data,{contentType: 'image/jpeg'})
                        .on(
                            storage.TaskEvent.STATE_CHANGED,
                            snapshot => {
                                console.log('snapshot', snapshot.state);
                                console.log('progress', (snapshot.bytesTransferred)/(snapshot.totalBytes)*100);

                                if(snapshot.state === storage.TaskState.SUCCESS){
                                    console.log('SUCCESS')
                                }
                            },
                            error => {
                                console.log('Image upload error', error);
                                rej(error)
                            },
                            () => {
                                storageRef.getDownloadURL()
                                .then((downLoadUri) => {
                                    console.log('File available at: ', downLoadUri);
                                    // addPostInfo
                                    res(downLoadUri)
                                })
                            }
                        )
                    }catch{err => console.log(err) }
                })

                
        } )
}

export const addPostInfo = async (post) => {
    
    console.log('post.postImageUri in addPostInfo', post.postImageUri.slice(10))
    const remoteUri = await uploadPost(post.postImageUri);
    return new Promise((res, rej) => {
        firestore()
        .collection('posts')
        .add({
            id: post.id,
            createdAt: post.date,
            description: post.description,
            image: remoteUri,
            location: post.checkin_location
        })
        .then(ref => {
            console.log('Finish adding in addPostInfo', ref)
            res(ref)
        })
        .catch(err => rej(err))
    })
}

And in the main screen, I directly send the image's path to the addPostInfo:

const _onSharingPost = () => {
        const postCreated = {
            id: 'alkdgjhfa;oiughaoghus',
            postImageUri: postImageUri,
            date: _getCurrentDate(),
            description: postDescription,
            checkin_location: checkInLocation
        }
        
        postActions.addPostInfo(postCreated);
    }

The path is like this:

content://com.google.android.apps.photos.contentprovider/0/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F58/ORIGINAL/NONE/image%2Fjpeg/950379202

ERROR

...base64 string --> File name too long

It got down to the SUCCESS part of the upLoadPost function but then still got error

I HAVE TRIED:

• Change the path --> cut off the content://
• Use XMLHttpRequest to send the blob to the upLoadPost to send that to the storage

As far as I know, the problem must be the base64 string converted from the image path. I know we need to change that to blob or something, but I don't know how. I can't find where this can be specified in rn-fetch-blob docs

PLEASE HELP ME