Open In App

How to get meta data of files in firebase storage using ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Within the domain of web development, effective file management is a frequent necessity, and Firebase Storage emerges as a resilient solution. This article explores the nuances of extracting metadata from files housed in Firebase Storage through the lens of ReactJS.

Prerequisites:

Steps to create React Application And Installing Module:

Step 1: Create a React application 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

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

npm install firebase@8.3.1 --save

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 firebase.js file with the following code.

import firebase from 'firebase';

const firebaseConfig = {
// Your Credentials
};

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

export default storage;

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"firebase": "^8.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

Example: Here, We are going to use a method called getMetadata which helps us to get the meta data of files in firebase storage.

Javascript




import { useState } from 'react';
import storage from './firebase';
 
function App() {
    const [image, setImage] = useState('');
    const [show, setShow] = useState(false);
    const [value, setValue] = 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, () => {
                // Getting Meta Data Of File
                storage.ref("images")
                    .child(image.name)
                    .getMetadata()
                    .then((data) => {
                        setValue(data);
                        setShow(true);
                    })
            });
    }
 
    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 />
                {
                    show ?
                        <div>
                            <h2>Name :
                                {value.name}
                            </h2>
                            <h2>Size :
                                {value.size}
                            </h2>
                            <h2>Path :
                                {value.fullpath}
                            </h2>
                            <h2>Time :
                                {value.timeCreated}
                            </h2>
                        </div>
                        :
                        <div></div>
                }
            </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



Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads