Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

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

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue