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

04 Jun, 2021
The following approach covers how to get metadata of files in firebase storage using react. Metadata is the basic information about the file. We have used the firebase module to achieve so.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app myapp
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 2: After creating your project folder i.e. myapp, move to it using the following command:
cd myapp
 
Project structure: Our project structure will look like this.
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.
firebase.js
import firebase from 'firebase';  const firebaseConfig = {    // Your Credentials};    firebase.initializeApp(firebaseConfig);var 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 meta data part. Here, We are going to use a method called getMetadata which helps us to get the meta data of files in firebase storage.
App.js
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/, you will see the following output:
Firebase
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript