Presentación

Firebase Auth

Cloud Firestore

Cloud Storage

Cloud Functions

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

  • 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>
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

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 📬