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.

  • Primero crearemos la acción uploadMessageFile en el módulo messages. Es casi un clon de su versión para rooms.
async uploadMessageFile({ rootGetters }, { roomID, file }) {
  const timestamp = Date.now();
  const userUID = rootGetters["user/getUserUid"];
  const uploadPhoto = () => {
    let fileName = `rooms/${roomID}/messages/${userUID}-${timestamp}.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);
  }
},
  • No te olvides de añadir la propiedad photo a la acción createMessage.

  • Ahora debemos añadir el botón para enviar la imagen.

<div class="control">
  <button
    @click="$refs.file.click()"
    :disabled="isLoading"
    type="button"
    class="button"
    :class="{ 'is-loading': isLoading }"
  >
    🌄
  </button>
  <input
    @change="onFileChange"
    ref="file"
    type="file"
    class="inputfile"
    style="display: none !important;"
  />
</div>
  • Además hay que ajustar los métodos para poder subir las imágenes.
async createMessage() {
  try {
    if (this.photo) {
      this.fileURL = await this.$store.dispatch(
        "messages/uploadMessageFile",
        {
          roomID: this.id,
          file: this.photo
        }
      );
    }
    ...
    this.message = this.photo = this.fileURL = "";
  } 
}
  • Nos quedaría poder mostrar la imagen que va a ser subida al usuario/a, permitiendo eliminarla al hacer click.
<div
  v-if="photo"
  @click="photo = null"
  class="photo-preview"
  :style="{ 'background-image': `url(${messagePhoto})` }"
></div>
  • Y por último mostrar la imagen en el chat.
<!-- Message has photo -->
<div
  v-if="message.photo"
  class="message__photo"
  :style="{ 'background-image': `url(${message.photo})` }"
></div>
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