Ver contenido
carlosazaustre.es carlosazaustre.es

Usando Firebase Storage con React.js

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

En este artículo vamos a ver como utilizar la funcionalidad de Storage de Firebase para poder subir y almacenar archivos en la nube, y como integrarlo con React.

Firebase Storage es algo similar a lo que puedes conseguir con Amazon S3. Un espacio en la nube donde almacenar archivos binarios (imágenes, ficheros de audio, video, etc...)

A través de su API es muy sencillo subir archivos desde una SPA, y en particular con React. Vamos a ello.

Configuración de Firebase.

Lo primero que necesitamos en entrar en la consola de firebase y crear un proyecto web nuevo, después copiar la configuración y añadirla a nuestro código. Esto es igual para todas las apps que hagamos con Firebase, por tanto para ésta parte puedes guiarte del tutorial que escribí anteriormente y que puedes encontrar aquí

Componente FileUpload

Vamos a crear un componente llamado FileUpload, cuyo formato será el siguiente:

Vamos a tener un elemento de tipo progress para mostrar el porcentaje de progreso de la subida del archivo y un input de tipo file para cargar los archivos. Por último tendremos un img donde mostraremos el archivo una vez subido con su URL apuntando a firebase.

El valor de progress va a estar referenciado por el estado del componente, de esta manera, cada vez que cambie, el componente se re-renderizará con el nuevo valor.

De igual manera, el atributo src del elemento img también es una referencia al estado del componente, para que sólo se muestre cuando esté subido.

Por tanto, nuestro Componente FileUpload debe tener un constructor donde inicialicemos el estado:

Gestión del evento

En el input de tipo file tenemos un evento onChange que se disparará cada vez que carguemos un fichero nuevo. Este evento va a llamar a la función handleOnChange que vamos a definir a continuación

En ésta función lo primero que vamos a hacer es tomar las referencias del fichero que estamos añadiendo en el input, una referencia al storage de nuestro proyecto en firebase donde tendremos un bucket o carpeta que llamaremos pictures y el nombre del fichero que vamos a subir y la referencia a la tarea de subida:

La tarea que acabamos de crear, tiene una serie de listener que se dispararán en cuanto ocurra un evento. El que nos interesa es state_changed que nos avisa en todo momento de la subida del fichero y nos da un snapshot con los bytes transferidos hasta el momento. Esto nos permite actualizar el estado y la barra de progreso.

Además de eso, nos proprociona un callback para gestionar los errores si los hubiese y una última función para indicarnos que la subida se ha realizado

Para la primera función, simplemente vamos a hacer una operación que nos devuelva el porcentaje subido sobre el total del tamaño del archivo y actualice el estado y así la barra de progreso:

Y cuando el fichero se haya subido totalmente, vamos a actualizar nuevamente el estado con la URL de la imagen en firebase storage, que tomamos de la referencia a la tarea:

Y listo! ya tenemos nuestro cargador de ficheros :)

Firebase Storage File Upload

El código completo de éste ejemplo lo tienes a continuación:

¿Quieres aprender más sobre React? Te lo enseño en mi curso online sobre fundamentos de React.js

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..