Cómo cargar archivos en el almacenamiento de Firebase usando React.js

El almacenamiento de Firebase proporciona una forma sencilla de almacenar datos generados por el usuario, como imágenes, videos y archivos de audio. Se integra con la autenticación de Firebase, por lo que puede controlar quién tiene acceso a los archivos.

Puede almacenar grandes cantidades de contenido con Firebase, ya que escala automáticamente para adaptarse a sus necesidades. Es fácil de usar con un marco de terceros como la biblioteca React JavaScript

Configuración del proyecto

Para subir archivos a almacenamiento de base de fuego, debe crear un formulario web que permita a los usuarios seleccionar un archivo del sistema de archivos.

Inicia por creando una aplicación React usando crear-reaccionar-aplicación. Ejecute este comando para generar un proyecto React llamado carga de base de fuego:

npx crear-reaccionar-aplicación firebase-subir

Para mantenerlo simple, solo necesita un botón de entrada que acepte archivos y un botón de carga. Reemplace el contenido de Aplicación.js con el siguiente código.

importar {usarEstado} desde "reaccionar"
funciónaplicación() {
 const [archivo, establecerArchivo] = usarEstado("");
// Maneja la entrada cambioeventoy estado de actualizaciones
funciónmanejarCambiar(evento) {
establecer archivo(evento.objetivo.archivos[0]);
 }
devolver (
<división>
<tipo de entrada ="expediente" aceptar ="imagen/*" onChange={handleChange}/>
<botón>Subir a Firebase</button>
</div>
 );
}
exportardefecto aplicación;

En el código anterior, el aporte etiquetas aceptar El atributo está configurado para permitir solo imágenes. Él manejarCambiar() La función maneja el cambio de entrada y actualiza el estado para almacenar el archivo seleccionado.

Configurar base de fuego

Antes de cargar el archivo en el almacenamiento de Firebase, debe crear un proyecto de Firebase.

Crear un proyecto de Firebase

Siga las instrucciones a continuación para crear un proyecto de Firebase:

1. Ve a la base de fuego página de la consola y haga clic en Agregar proyecto o crear un proyecto (si está creando un proyecto por primera vez).
2. Asigne a su proyecto un nombre de su elección y haga clic en Continuar.
3. Anule la selección de Google Analytics, ya que no lo necesita para este proyecto y haga clic en Crear proyecto.
4. Hacer clic Continuar una vez que el proyecto esté listo.
5. Clickea en el icono web en la página de descripción general del proyecto para registrar una aplicación web.
6. Asigne un apodo a su aplicación y haga clic en Registro.
7. Copie el objeto de configuración proporcionado. Lo necesitará para conectar su aplicación a Firebase.

Crear un depósito de almacenamiento en la nube

Firebase almacena archivos en un depósito de almacenamiento en la nube. Siga los siguientes pasos para crearlo:

1. En la página de descripción general del proyecto, haga clic en el Almacenamiento pestaña en el panel de navegación izquierdo.
2. Hacer clic Empezar y seleccione Modo de prueba.
3. Seleccione la ubicación predeterminada del depósito de almacenamiento y haga clic en Hecho.

Ahora está listo para comenzar a cargar archivos en el almacenamiento de Firebase.

Agregue Firebase para reaccionar

En su terminal, navegue a la carpeta de su proyecto React. Ejecute el siguiente comando para instalar el SDK de Firebase:

npm Instalar en pc base de fuego

Crear un nuevo archivo, firebaseConfig.jse inicializa Firebase.

importar {iniciarAplicación} desde "base de fuego/aplicación";
importar { obtenerAlmacenamiento } desde "base de fuego/almacenamiento";
// Inicializar base de fuego
constante app = initializeApp ({
 Clave API: <Clave API>,
 dominio de autenticación: <authDomain>,
 Projecto ID: <Projecto ID>,
 cubo de almacenamiento: <cubo de almacenamiento>,
 Id del remitente de mensajes: <mensajeríaSenderId>,
 ID de aplicación: <ID de aplicación>,
 ID de medición: <ID de medida>,
});
// Referencia de almacenamiento de Firebase
constante almacenamiento = getStorage (aplicación);
exportardefecto almacenamiento;

Use el objeto de configuración que obtuvo después de crear el proyecto de Firebase para inicializar la aplicación de Firebase.

La línea final exporta la referencia de almacenamiento de Firebase para que pueda acceder a esa instancia desde el resto de su aplicación.

Crear una función de controlador para cargar las imágenes en Firebase

Hacer clic en el botón de carga debería activar la función responsable de cargar el archivo en el almacenamiento de Firebase. Vamos a crear esa función.

En Aplicación.js, agrega la función manejarSubir. En la función, verifique si el archivo no está vacío, ya que un usuario puede hacer clic en el botón de carga antes de elegir un archivo. Si el archivo no existe, genera una alerta que le dice al usuario que cargue un archivo primero.

funciónmanejarSubir() {
 si (!archivo) {
 alerta("¡Por favor, elija un archivo primero!")
 }
}

Si el archivo existe, cree una referencia de almacenamiento. Una referencia de almacenamiento actúa como un puntero al archivo en la nube en el que desea operar.

Comience por importar el servicio de almacenamiento que creó en el firebaseConfig.js expediente.

importar almacenamiento desde "./firebaseConfig.js"

Importar árbitro desde la instancia de almacenamiento de Firebase y pase el servicio de almacenamiento y la ruta del archivo como argumento.

importar {árbitro} desde "base de fuego/almacenamiento"
funciónmanejarSubir() {
 si (!archivo) {
 alerta("¡Por favor, elija un archivo primero!")
 }
constante storageRef = ref (almacenamiento, `/archivos/${archivo.nombre}`)
}

A continuación, cree una tarea de carga pasando la instancia de almacenamiento de Firebase al uploadBytesResumible() función. Hay varios métodos que puede usar, pero este en particular le permite pausar y reanudar una carga. También expone actualizaciones de progreso.

Él uploadBytesResumible() La función acepta la referencia de almacenamiento y el archivo para cargar.

importar {
 árbitro,
 uploadBytesReanudable 
} desde "base de fuego/almacenamiento";
funciónmanejarSubir() {
Si (!expediente) {
 alert("Por favor, elija un archivo primero!")
 }
constante storageRef = ref (almacenamiento, `/archivos/${archivo.nombre}`)
constante uploadTask = uploadBytesResumable (storageRef, archivo);
}

Para monitorear el progreso y manejar los errores a medida que se carga el archivo, escuche los cambios de estado, los errores y la finalización.

importar {
 árbitro,
 uploadBytesResumible,
 getDownloadURL 
} desde "base de fuego/almacenamiento";
funciónmanejarSubir() {
 si (!archivo) {
 alerta("¡Por favor, elija un archivo primero!")
 }
constante storageRef = ref (almacenamiento,`/archivos/${archivo.nombre}`)
constante uploadTask = uploadBytesResumable (storageRef, archivo);
subirTarea.sobre(
"estado_cambiado",
 (instantánea) => {
constante porcentaje = Matemáticas.redondo(
 (instantánea.bytesTransferidos/instantánea.totalBytes) * 100
 );
// progreso de actualización
 setPercent (porcentaje);
 },
 (error) => consola.log (error),
 () => {
// URL de descarga
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consola.log (dirección URL);
 });
 }
 ); 
}

Aquí el estado_cambiado event tiene tres funciones de devolución de llamada. En la primera función, realiza un seguimiento del progreso de la carga y carga el estado del progreso. En la segunda función de devolución de llamada, maneje un error si la carga no se realiza correctamente.

La función final se ejecuta una vez que se completa la carga, obtiene la URL de descarga y luego la muestra en la consola. En una aplicación de la vida real, podría guardarla en una base de datos.

Puede mostrar el estado de progreso de la carga utilizando el estado porcentual. También agregue un al hacer clic evento en el botón de carga para activar el manejarSubir función.

importar { estado de uso } desde "reaccionar";
funciónaplicación() {
constante [porcentaje, establecerPorcentaje] = usarEstado(0);
devolver (
<división>
<tipo de entrada ="expediente" onChange={handleChange} accept="" />
<botón onClick={handleUpload}>Subir a Firebase</button>
<pag>{por ciento} "% hecho"</pag>
</div>
 )
}

Aquí está el código completo para Aplicación.js:

importar { estado de uso } desde "reaccionar";
importar { almacenamiento } desde "./firebaseConfig";
importar { ref, uploadBytesResumable, getDownloadURL } desde "base de fuego/almacenamiento";
funciónaplicación() {
// Estado para almacenar el archivo cargado
 const [archivo, establecerArchivo] = usarEstado("");
// Progreso
constante [porcentaje, establecerPorcentaje] = usarEstado(0);
// Manejar el evento de carga de archivos y actualizar el estado
funciónmanejarCambiar(evento) {
establecer archivo(evento.objetivo.archivos[0]);
 }
constante manejarSubir = () => {
 si (!archivo) {
 alerta("¡Sube una imagen primero!");
 }
constante storageRef = ref (almacenamiento, `/archivos/${archivo.nombre}`);
// el progreso se puede pausar y reanudar. También expone actualizaciones de progreso.
// Recibe la referencia de almacenamiento y el archivo a cargar.
constante uploadTask = uploadBytesResumable (storageRef, archivo);
subirTarea.sobre(
"estado_cambiado",
 (instantánea) => {
constante porcentaje = Matemáticas.redondo(
 (instantánea.bytesTransferidos/instantánea.totalBytes) * 100
 );
// progreso de actualización
 setPercent (porcentaje);
 },
 (error) => consola.log (error),
 () => {
// URL de descarga
 getDownloadURL(uploadTask.snapshot.ref).then((url) => {
consola.log (dirección URL);
 });
 }
 );
 };
devolver (
<división>
<tipo de entrada ="expediente" onChange={handleChange} accept="/image/*" />
<botón onClick={handleUpload}>Subir a Firebase</button>
<pag>{por ciento} "% hecho"</pag>
</div>
 );
}
exportardefecto aplicación;

Hacer más con el almacenamiento de Firebase

La carga de archivos es una de las funciones más básicas del almacenamiento de Firebase. Sin embargo, hay otras cosas que el almacenamiento de Firebase te permite hacer. Puede acceder, mostrar, organizar y eliminar sus archivos.

En una aplicación más complicada, es posible que desee autenticar a los usuarios para darles permiso para interactuar solo con sus archivos.

Autenticación de usuarios con Firebase y React

Leer siguiente

Sobre el Autor