filepath.replace is not a function

[justfede]

I got "filepath.replace is not a function" when I try to upload some picture to firebase storage.

`
const firestack = new Firestack();

    firestack.storage.setStorageUrl('chatapp-e4bc6.appspot.com');
    firestack.storage.uploadFile('photos/1.jpg', source, {
      contentType: 'image/jpeg',
      contentEncoding: 'base64',
    })
    .then((res) => console.log('The file has been uploaded'))
    .catch(err => console.error('There was an error uploading the file', err))`

Running on Android Emulator.

update: The problem is in "storage.js" line 85:

[auser]

Want to make a PR?

[Jorrit2002]

Got the same problem. How did you fix it?

[jacenko]

@justfede @Jorrit2002 Just had the same issue. Turned out I was passing the whole image object instead of image.path, a string. Make sure source is a path string, not an object.

[justfede]

Right @jacenko . That's was my error!

[danielfred1129]

@justfede I have a similar issue, but I couldn't get it solved. You could check the code below.

  import RNFirebase from 'react-native-firebase';
  import RNFetchBlob from 'react-native-fetch-blob';
  
  // Prepare Blob support
  const Blob = RNFetchBlob.polyfill.Blob;
  const fs = RNFetchBlob.fs;
  
  export const firebaseApp = RNFirebase.initializeApp(configurationOptions);
  
  ...
  
  let uploadBlob = null;
  const imageRef = firebaseApp.storage().ref('/photos/`).child('image');

  fs.readFile(uploadUri, 'base64')
    .then((data) => {
      return Blob.build(data, { type: `${mime};BASE64` });
    })
    .then((blob) => {
      uploadBlob = blob;
      return imageRef.put(blob, { contentType: mime });
    })
    .then(() => {
      uploadBlob.close();
      return imageRef.getDownloadURL();
    })
    .then((url) => {
      //Success
      console.log('success');
    })
    .catch((error) => {
      console.log('failed on uploading image:', error);
  })
  ...

I get this error. { [TypeError: undefined is not a function (evaluating 'filePath.replace('file://', '')')]

Can you please help me?

[MaxInMoon]

Got this error

TypeError: filePath.replace is not a function at StorageReference.putFile

Code

when trying to upload a blob (not base64) like so:

import RNFetchBlob from 'react-native-fetch-blob';

...

// Prepare Blob support
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

...

// Upload function
Blob
  .build(RNFetchBlob.wrap(image.path), { type : 'image/jpeg' })
  .then((blob) => firebase.storage()
    .ref('avatars').child('myimage.jpg')
    .put(blob, { contentType : 'image/jpg' })
    .then((snapshot) => {
      resolve(snapshot);
    })
  )
  .catch((error) => {
    reject(error);
  });

Versions

  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.4",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-image-crop-picker": "^0.17.2",
    "react-redux-firebase": "^1.5.0",
  },

Does anyone succeeded to send an image/blob/file? Thank

[RobinKuiper]

Same error here, any suggestions?

Edit: return imageRef.put(blob._ref, { contentType: mime });

Fixed it for me, but files are getting uploaded without file extension, any ideas?

[perrosnk]

+1

[perrosnk]

I think I found the solution.. If you are using react-native-firebase, you don't need to create a blob file. Just pass the path of the picture to .put method. imageRef.put(uri, { contentType: mime }); It seems react-native-firebase takes care of all else.

[atyenoria]

@perrosnk Thanks! I can solve the same problem by this!

[kaushalmarakana]

@perrosnk Thanks I spent whole day for this error But now it works for me

very very thanks

[andyngdz]

Thanks @pedro-ribeiro . It solved my issue.

[khuongdv]

Before I used rn-fetch-blob with 'firebase' (the npm package), when I use react-native-firebase, no need this lib (rn-fetch-blob) anymore. imageRef.put(uri,... like @perrosnk mentioned is a good answer for the issue.

[nikhilmeria]

Guys can anyone plz paste the complete code you used to get this working. I m using "react-native-firebase" . I am looking for the solution prescribed by @perrosnk , to be specific. thank you.

@kaushalmarakana, can I hv your email id bro???

[tanthanhtran2708]

I think I found the solution.. If you are using react-native-firebase, you don't need to create a blob file. Just pass the path of the picture to .put method. imageRef.put(uri, { contentType: mime }); It seems react-native-firebase takes care of all else.

can you show me the full codes pleasee