Getting : TypeError: undefined is not a function (evaluating 'filePath.replace('file://', '')') while uploading a blob to firebase storage

问题

I am developing an small React Native POC with firebase storage in which a user selects image and uploads it to firebase storage under /uid/ directory. I am using react-native-firebase for using firebase in the application.

I have the uri of the image with which i am creating its blob using RNFetchBlob and then trying to upload the blob to firebase.

Here is the code for handling the blob making and uploading.

handleUploadTask = (mime = 'application/octet-stream') => {
    const {imageSource} = this.state;
    this.setState({uploading: true});

    const Blob = RNFetchBlob.polyfill.Blob;
    const fs = RNFetchBlob.fs;

    fs.readFile(imageSource.uri, 'base64')
        .then((data) => {
            return Blob.build(data, { type: `${mime};BASE64` })
        }).then(blob => {
            console.log('going to upload');
            this.uploadBlobToFirebase(blob);
        }).catch(error => {
            console.error('fs error:', error);
        })
}

and here is the uploadBlobToFirebase

uploadBlobToFirebase = (blob) => {
    const currentUserId = firebase.auth().currentUser.uid;
    const path = `/${currentUserId}/`;
    const unsubscribe = firebase.storage().ref(path).putFile(blob).on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        (snapshot) => {
        const  progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        //restricting progress to be shown with only 0,2,4,... 98, 100.
        if (progress % 2 == 0) {
            this.setState({
                uploadProgress: progress
            })
        }

        if (snapshot.state === firebase.storage.TaskState.SUCCESS) {
            this.setState({
                uploading: false,
            }, () => {
                //TODO: should also add this image to flatlist.
                //Get download url and set to image in flatlist.
                Alert.alert('Upload completed');
            })

          }
        },
        (error) => {
            this.setState({
                uploading: false,
            }, ()=>{
                unsubscribe();
                console.error(error);
            })
        },
      ); 
}

The function handleUploadTask is called on an onPress of a upload button and runs fine till console.log('going to upload') and then ends up into the catch with error:

'fs error:', { [TypeError: undefined is not a function (evaluating 'filePath.replace('file://', '')')] line: 115903, column: 41, sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

I am totally blank here. Not able to find the file.replace which is causing issue and why. Any help would be appreciated. Thanks.

回答1:

putFile expects a string path to a file located on native storage.

You'll need to save your blob to a file in temporary storage on the device then provide the path to that temporary file to the putFile method.

React Native Firebase does provide some statics that can help with locating certain directories on the device, e.g. where the temporary directory is located via firebase.storage.Native.TEMPORARY_DIRECTORY_PATH. See here for the docs of these.

It's designed like this as transmitting files/blobs over the React Native bridge would be a big performance hit vs keeping everything native.

Based on your example code you should be able to do the following;

firebase.storage().ref(path).putFile(imageSource.uri).on(/* ... */);

The reference docs with examples for putFile are located here: https://rnfirebase.io/docs/v5.x.x/storage/reference/Reference#putFile

来源：https://stackoverflow.com/questions/53686553/getting-typeerror-undefined-is-not-a-function-evaluating-filepath-replace