How to upload images on my React app from firebase storage?

0
votes

I am trying to make a social media app. I wanted to add a feature of uploading pictures but I don't know how to fetch those pictures in my firebase storage and display all of them as a post on my app.

This is my firebase.js file

    import firebase from "firebase/app";
    import "firebase/storage";

const firebaseConfig = {
    apiKey: "AIzaSyCbiHH-zpob5AytooHMxrB_oncIz5wAcgg",
    authDomain: "expresate-react.firebaseapp.com",
    databaseURL: "https://expresate-react-default-rtdb.firebaseio.com",
    projectId: "expresate-react",
    storageBucket: "expresate-react.appspot.com",
    messagingSenderId: "400618187775",
    appId: "1:400618187775:web:d78270044e4b1d464215ca"
  };
firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();

export { storage, firebase as default };

This is the function which uploads the image on the firebase storage.

const image = this.state.selectedFile;

    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
        "state_changed",
        snapshot => {},
        error => {
            console.log(error);
        },
        () => {
            storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
              this.setState({url: url, selectedFile: null});
            });
        }
    );

The upload feature is working perfectly I can see the files in firebase storage. Now, how do I fetch them and display them on my app?

Thank you

1
reactjsfirebasefirebase-storage

1 Answers

0
votes

You already get the url with getDownloadURL. It is an url like this one.

You can use that to display your image. Just put that url into a img like here:


<img src={url} />