How to upload an image / file using Firebase Realtime database and React Native?

Question

I'm developing a React Native project and I'm using the Firebase Real-time database for that.

I want to maintain a user profile page. For that, I need to upload a user profile image to the Firebase database. When I view the user profile, I should be able to see the user profile with the relevant user profile image. I should be able to update and remove the user profile image as well.

Using GCS (Google Cloud Storage) to store the image/file and using Firebase Realtime database to store the URL is also OK for me.

I just need the best possible solution.

I went through some similar questions and still confused about a clear way of doing that.

Can you please explain and tell me how to do this in React Native?

Answer 1

I would like to share some code in my side project, which implemented the features you mentioned above. However, I am sorry that the full access of the project's source code is unavailable.

Step 1. Upload the image file while user submit image.

import firebase from 'react-native-firebase';

const upload = async (filepath: string, filename: string, filemime: string) => {
    const metaData = { contentType: filemime };
    const res = await firebase
        .storage()
        .ref(`gcs-folder-name-here/${filename}`)
        .putFile(filepath, metaData); // put image file to GCS
    return res;
};

Step 2. After the called the upload function you should be able to retrieve the image URL from response and save it back to Firebase Real-time Database.

import firebase from 'react-native-firebase';

const userId = firebase.auth().currentUser.uid;
const res = await upload(`absolute/path/to/image.JPG`, `image.JPG`, `image/jpeg`); // function in step 1
const data = {
    name: 'User Name'
    photo: res.downloadURL, // retrieve image URL
};
firebase.database().ref('users/' + userId).set(data);

Hope it will help.