How to get local file path of image file downloaded from Firebase Storage in React Native

user_4523580 0
Viewed 4585

In my React Native app, i need to

  1. Upload an image to Firebase Storage
  2. Then Download it and edit it (crop/rotate)
  3. Upload the edited image the Firebase Storage again

I was able to upload the image, get its URL using the getDownloadURL() method, and display it using Image component as it takes the url input right away.

Now I need the local file path in order to edit and reupload the edited image to Firebase Storage.

This question explains a getFile() method, but I cant find it firebase docs. Another question give some direction but its in JAVA.

Some Blogs mention using libraries such as react-native-fs, react-native-fetch-blob etc, but it appears they are trying to save the file in storage/gallery. That is unnecessary for my requirement (i dont want to save images in gallery). I probably just need the path to the cached image where it gets downloaded.

Can someone please explain how to get local file path of downloaded image file in React Native lingo ?

EDIT:

Not using Expo. And I want it to work with Android and iOS both.

firebase-storage firebase react-native
2 Answers
npm install rn-fetch-blob

Follow these steps:

a) follow the installation instructions.

a2) if you want to manually install the package without using rnpm, go to their wiki.

b) Finally, that's how I made it possible to download files within my app:

const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
let options = {
  fileCache: true,
  addAndroidDownloads : {
    useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
    notification : false,
    path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
    description : 'Downloading image.'
  }
}
config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
  // do some magic here
})

OR

const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');
user_118124500

install react-native-fs

yarn add react-native-fs

and can get temporary path like this

var RNFS = require('react-native-fs');

const imageUrl = `http://www.example.com/abc.png`;
const imagePath = `${Platform.OS==="android"?"/storage/emulated/0/Download":RNFS.TemporaryDirectoryPath}/${((Math.random() * 1000) | 0)}.jpeg`;
RNFS.downloadFile({
        fromUrl: imageUrl,
        toFile: imagePath
    }).promise
        .then((result) => {
          console.log(imagePath);  //here you get temporary path
    })
      .catch((e) => {
        console.log(e,"error");
      })
user_80798680
Related