How to list all the files from firebase storage using ReactJS ?

To list all the files from Firebase storage using React JS we will access the Firebase storage using the SDK and display the data on the webpage from the storage.

Prerequisites:

• NPM & Node.js
• React JS
• Firebase

Approach:

To list all the files from Firebase storage using ReactJS we will first configure the Firebase storage in the application using the Firebase Storage JavaScript SDK. Then initialize Firebase and access the storage using firebase.storage() method.

Steps to create React Application And Installing Module:

Step 1: Create a React-app using the following command:

npx create-react-app myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command:

cd myapp

Project Structure:

Step 3: After creating the ReactJS application, Install the firebase module using the following command:

npm i [email protected] --save

The updated dependencies in package.json file.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "firebase": "^8.3.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
},

Step 4: Go to your firebase dashboard and create a new project and copy your credentials.

const firebaseConfig = {
      apiKey: "your api key",
      authDomain: "your credentials",
      projectId: "your credentials",
      storageBucket: "your credentials",
      messagingSenderId: "your credentials",
      appId: "your credentials"
};

Step 5: Initialize the Firebase into your project by creating a firebase.js file with the following code.

// Filename - firebase.js

import firebase from 'firebase';

const firebaseConfig = {
    // Your Credentials
};

firebase.initializeApp(firebaseConfig);
let storage = firebase.storage();

export default storage;

Step 6: Now go to your storage section in the firebase project and update your security rules. Here we are in testing mode, so we allow both read and write as true. After updating the code shown below, click on publish. 

Step 7: Now implement the list part. Here, We are going to use a method called listAll which helps us to get the list of all the files from firebase storage.

// Filaname - App.js

import { useState } from "react";
import storage from "./firebase";

function App() {
    // States for data and image
    const [data, setData] = useState([]);
    const [image, setImage] = useState("");

    const upload = () => {
        if (image == null) return;
        // Sending File to Firebase Storage
        storage
            .ref(`/images/${image.name}`)
            .put(image)
            .on("state_changed", alert("success"), alert);
    };

    // List All Files
    const listItem = () => {
        storage
            .ref()
            .child("images/")
            .listAll()
            .then((res) => {
                res.items.forEach((item) => {
                    setData((arr) => [...arr, item.name]);
                });
            })
            .catch((err) => {
                alert(err.message);
            });
    };

    return (
        <div className="App" style={{ marginTop: 250 }}>
            <center>
                <input
                    type="file"
                    onChange={(e) => {
                        setImage(e.target.files[0]);
                    }}
                />
                <button onClick={upload}>Upload</button>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <button onClick={listItem}>
                    List Item
                </button>
                <br />
                <br />
                {data.map((val) => (
                    <h2>{val}</h2>
                ))}
            </center>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: