Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.

  • Comenzaremos (como siempre) en el modelo. En este caso debemos añadir las acciones necesarias para poder subir las portadas de las salas de conversación. En rooms.js añadimos dos acciones nuevas.
getNewRoomId() {
  return db.collection("rooms").doc();
},

async uploadRoomImage(context, { roomID, file }) {
  const uploadPhoto = () => {
    let fileName = `rooms/${roomID}/${roomID}-image.jpg`;
    return storage.ref(fileName).put(file);
  };

  function getDownloadURL(ref) {
    return ref.getDownloadURL();
  }

  try {
    let upload = await uploadPhoto();
    return await getDownloadURL(upload.ref);
  } catch (error) {
    throw Error(error.message);
  }
},
  • Primero debemos añadir la opción de seleccionar una imagen al crea una sala. Ahora ajustaremos el template para poder permitir seleccionar la imagen.
<div class="field">
  <label class="label">Image</label>
  <div class="control">
    <div
      class="room__image"
      :style="{
        'background-image': `url(${roomImage})`
      }"
    ></div>
    <div class="file">
      <label class="file-label">
        <input
          class="file-input"
          type="file"
          @change="onFileChange"
          ref="file"
        />
        <span class="file-cta">
          <span class="file-label"> Choose a image </span>
        </span>
      </label>
    </div>
  </div>
</div>
  • Mostraremos una imagen por defecto, así que tenemos que saber si el usuario ha seleccionado una para entonces usar la selección. Todo ello podemos conseguirlo editando el modelo local y con la propiedad computada roomImage.
data() {
  return {
    isLoading: false,
    image: null,
    roomData: {
      name: "",
      description: "",
      imageURL: ""
    }
  };
},

...
computed: {
  roomImage() {
    return this.image
      ? URL.createObjectURL(this.image)
      : require("@/assets/img/room-image.jpg");
  }
}
  • Y por supuesto el método onFileChange que está asociado al input de tipo archivo.
onFileChange(event) {
  this.image = event.target.files[0];
  this.$refs.file.value = null;
},
  • Ahora debemos modificar el método local createRoom para hacer uso de las nuevas acciones y (si el usuario/a a añadido una portada) subirla antes de crear la sala. De ahí que necesitemos obtener una ID de Firestore con antalación.
async createRoom() {
  this.isLoading = true;
  try {
    const newRoom = await this.$store.dispatch("rooms/getNewRoomId");
    const roomID = newRoom.id;

    if (this.image) {
      this.imageURL = await this.$store.dispatch("rooms/uploadRoomImage", {
        file: this.image,
        roomID
      });
    }
	  ...
	  this.roomData.name = this.roomData.description = this.roomData.imageURL = "";
	  ...
  } catch (error) {
    ...
  } finally {
    ...
  }
}
  • Debemos asegurarnos de ajustar la acción createRoom para que acepte la ID donde va a guardar por adelantado y la propiedad image con la imagen elegida o null, en su defecto.
async createRoom() {
  this.isLoading = true;
  try {
   await this.$store.dispatch("rooms/createRoom", {
      name: this.roomData.name,
      description: this.roomData.description,
      image: this.imageURL,
      roomID
    });
	  this.roomData.name = this.roomData.description = this.roomData.imageURL = "";
	  ...
  } catch (error) {
    ...
  } finally {
    ...
  }
}
  • Y por último la acción con el mismo nombre.
async createRoom({ rootState }, { name, description, image, roomID }) {
  await db
    .collection("rooms")
    .doc(roomID)
    .set({
      name,
      description,
      createdAt: Date.now(),
      adminUid: rootState.user.user.uid,
      adminName: rootState.user.user.displayName,
      image
    });
},
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 📬