Cómo subir archivos con Firebase Cloud Storage

• 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");

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