Crear una imagen de portada

• 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
    });
},