¿Cómo obtener metadatos de archivos en el almacenamiento de firebase usando ReactJS?

El siguiente enfoque cubre cómo obtener metadatos de archivos en el almacenamiento de firebase usando react. Los metadatos son la información básica sobre el archivo. Hemos utilizado el módulo firebase para lograrlo.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app myapp

• Paso 2: después de crear la carpeta de su proyecto, es decir, myapp, acceda a ella con el siguiente comando:

  cd myapp

Estructura del proyecto: La estructura de nuestro proyecto se verá así.

Paso 3: después de crear la aplicación ReactJS, instale el módulo Firebase con el siguiente comando:

npm install firebase@8.3.1 --save

Paso 4: Vaya a su panel de Firebase y cree un nuevo proyecto y copie sus credenciales.

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

Paso 5: Inicialice Firebase en su proyecto creando el archivo firebase.js con el siguiente código.

import firebase from 'firebase';
  
const firebaseConfig = {
    // Your Credentials
};
    
firebase.initializeApp(firebaseConfig);
var storage = firebase.storage();
  
export default storage;

Paso 6: Ahora ve a tu sección de almacenamiento en el proyecto firebase y actualiza tus reglas de seguridad. Aquí estamos en modo de prueba, por lo que permitimos que tanto la lectura como la escritura sean verdaderas. Después de actualizar el código que se muestra a continuación, haga clic en publicar. 

Paso 7: Ahora implemente la parte de metadatos. Aquí, vamos a utilizar un método llamado getMetadata que nos ayuda a obtener los metadatos de los archivos en el almacenamiento de Firebase.

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: