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.

  • 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
    });
},
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


Cloud Functions ☁


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue