Muestra una lista de archivos con Cloud Storage en la Web

Cloud Storage para Firebase te permite mostrar una lista del contenido de tu bucket de Cloud Storage. Los SDK muestran los elementos y los prefijos de los objetos que se encuentran en la referencia de Cloud Storage actual.

Los proyectos que usan la API de List requieren la versión 2 de las reglas de Cloud Storage para Firebase. Si tienes un proyecto de Firebase, sigue los pasos de la Guía sobre reglas de seguridad.

list() usa la API de List de Google Cloud Storage. En Cloud Storage para Firebase, usamos / como delimitador, lo que permite emular la semántica del sistema de archivos. Para permitir un recorrido eficiente de buckets de Cloud Storage jerárquicos y de gran tamaño, la API de List muestra los prefijos y los elementos por separado. Por ejemplo, si subes un archivo /images/uid/file1, ocurrirá lo siguiente:

• root.child('images').listAll() mostrará /images/uid como un prefijo.
• root.child('images/uid').listAll() mostrará el archivo como un elemento.

El SDK de Cloud Storage para Firebase no muestra las rutas de acceso a los objetos que contienen dos / consecutivas o que terminan en /.. Por ejemplo, considera un bucket que tenga los siguientes objetos:

• correctPrefix/happyItem
• wrongPrefix//sadItem
• lonelyItem/

Las operaciones list que se realicen sobre elementos de este bucket mostrarán los siguientes resultados:

• Las que se realicen en la raíz mostrarán las referencias a correctPrefix, wrongPrefix y lonelyItem como prefixes.
• Las que se realicen en correctPrefix/ mostrarán las referencias a correctPrefix/happyItem como items.
• Las que se realicen en wrongPrefix/ no mostrarán ninguna referencia porque wrongPrefix//sadItem contiene dos / consecutivas.
• Las que se realicen en lonelyItem/ no mostrarán ninguna referencia porque el objeto lonelyItem/ termina en /.

Muestra una lista de todos los archivos

Puedes usar listAll para obtener todos los resultados de un directorio. Se recomienda usarlo con directorios pequeños, ya que los resultados se almacenan en el búfer de la memoria. También es posible que la operación no muestre una instantánea coherente si se agregan o quitan objetos durante el proceso.

En el caso de una lista de gran tamaño, usa el método paginado list(), ya que listAll() almacena todos los resultados en el búfer de la memoria.

En el siguiente ejemplo, se muestra el funcionamiento de listAll.

import { getStorage, ref, listAll } from "firebase/storage";

const storage = getStorage();

// Create a reference under which you want to list
const listRef = ref(storage, 'files/uid');

// Find all the prefixes and items.
listAll(listRef)
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
storage_list_all.js

// Create a reference under which you want to list
var listRef = storageRef.child('files/uid');

// Find all the prefixes and items.
listRef.listAll()
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
list-files.js

Muestra una lista paginada de resultados

La API de list() impone un límite para la cantidad de resultados que se muestran. list() proporciona una vista de página coherente y expone un pageToken que permite controlar el momento en que se deben recuperar más resultados.

El pageToken codifica la ruta de acceso y la versión del último elemento que se mostró en el resultado anterior. Si se realiza una solicitud posterior con el pageToken, se mostrarán los elementos que vienen después de él.

En el siguiente ejemplo, se muestra la paginación de un resultado obtenido con async/await.

import { getStorage, ref, list } from "firebase/storage";

async function pageTokenExample(){
  // Create a reference under which you want to list
  const storage = getStorage();
  const listRef = ref(storage, 'files/uid');

  // Fetch the first page of 100.
  const firstPage = await list(listRef, { maxResults: 100 });

  // Use the result.
  // processItems(firstPage.items)
  // processPrefixes(firstPage.prefixes)

  // Fetch the second page if there are more elements.
  if (firstPage.nextPageToken) {
    const secondPage = await list(listRef, {
      maxResults: 100,
      pageToken: firstPage.nextPageToken,
    });
    // processItems(secondPage.items)
    // processPrefixes(secondPage.prefixes)
  }
}
storage_list_paginate.js

async function pageTokenExample(){
  // Create a reference under which you want to list
  var listRef = storageRef.child('files/uid');

  // Fetch the first page of 100.
  var firstPage = await listRef.list({ maxResults: 100});

  // Use the result.
  // processItems(firstPage.items)
  // processPrefixes(firstPage.prefixes)

  // Fetch the second page if there are more elements.
  if (firstPage.nextPageToken) {
    var secondPage = await listRef.list({
      maxResults: 100,
      pageToken: firstPage.nextPageToken,
    });
    // processItems(secondPage.items)
    // processPrefixes(secondPage.prefixes)
  }
}
list-files.js

Soluciona errores

list() y listAll() mostrarán una promesa rechazada si no actualizaste las reglas de seguridad a la versión 2. Actualízalas si ves el siguiente error:

Listing objects in a bucket is disallowed for rules_version = "1".
Please update storage security rules to rules_version = "2" to use list.

Otros errores posibles pueden indicar que el usuario no tiene el permiso adecuado. Para obtener más información sobre los errores, consulta Soluciona errores.