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étodo ref() 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");
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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬