Cómo subir archivos con Firebase Cloud Storage
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Para subir cualquier archivo a Firebase Cloud Storage necesitamos el archivo en sí 😉 pero también una referencia al lugar donde queremos guardarlo.
- Estas referencias parten del servicio
storage
a través del métodoref()
y son jerárquicas, lo que quiere decir que podemos crear la estructura de directorios que nos de la gana.
const avatars = firebase.storage().ref().child("avatars");
const myAvatar = avatars.child("juanwmedia.jpg");
// Lo mismo
const myAvatar = firebase.storage().ref().child("avatars/juanwmedia.jpg");
- Teniendo esto claro, podemos crear un pequeño escenario y permitir seleccionar una imagen (no puedes cargar una del sistema de archivos sin más) para subirla Cloud Storage.
doUpload(event) {
// Obtener el archivo
const file = event.target.files[0];
// Crear referencia
const ref = storage.ref("images/" + file.name);
// Subir el archivo
const upload = ref.put(file);
// Supervisar el proceso
upload.on(
"state_changed",
function progress(snapshot) {
console.warn((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
},
function error(error) {
console.error(error);
},
function complete() {
console.info("Finished uploading!");
}
);
}
- Como ves podemos inspeccionar el proceso de subida y actuar mientras progresa (por ejemplo para actualizar una barra de progreso), ante posibles errores y, por supuesto, cuando ha terminado.
- Incluso disponemos de métodos para pausar y resumir el proceso. Algo esencial si queremos que todo el proceso funcione con conectividad intermitente.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.