1

Estoy haciendo un proyecto con Angular 6 y Cloud Firestore, que consiste en agregar productos. He definido una interfaz con los atributos que deberá de llevar, y al momento de recibirlos de un formulario, los manejo con el servicio:

addProduct(idDepartament: string, product: Product, image: File) {
    const id = this.db.createId();
    const document = this.db.doc(`departaments/${idDepartament}/products/${id}`);
    // Aquí sí presiste el ID del producto
    product.id = id;

    if (image) {
      // Si existe la imagen, entonces la guardará en Firebase Storage
      const path = `images/${idDepartament}/${id}/${image.name}`;
      const ref = this.storage.ref(path);
      const task = this.storage.upload(path, image);
      task.snapshotChanges().pipe(
        finalize(() => {
          ref.getDownloadURL().subscribe((data: string) => {
            product.image = data; // Guarda la dirección donde se almacenó la imagen
            product.nameImage = image.name; // Guarda el nombre de la imagen
          });
        })).subscribe();
    } else {
      // Si no hay imagen, tendrá una por defecto
      product.image = './assets/img/noImage.png';
    }

    // Retorna una promesa para mostrar si todo salió bien, o hubo un problema en la subida del archivo
    return document.set(product);
  }

Me parece que todo está bien, sin embargo, al probarlo no guarda nameImage ni image en product. Y verifiqué que sí aparezcan en el objecto: Objecto product

Objeto product

¿Qué sucede? Parece que lo está guardando correctamente. No obstante, en la Base de Datos no se encuentran los dos atributos para la imagen: Archivo en Firebase introducir la descripción de la imagen aquí

Gracias. Espero me puedan aclarar este suceso tan extraño, pues hace un par de días funcionaba bien, y ahora ya no quiere almacenar esos dos atributos.

1 respuesta 1

0

El problema es que estas realizando trabajos asíncronos y para cuando hagas document.set(product) la imagen aun no se ha guardado en la base de datos.

Necesitas esperar a que la imagen se guarde completamente, para que se ejecute el código en el que image y nameImage se guardan y entonces (y solo entonces) vas a tener listo todo para guardar.

Una solución posible (de muchas) sería la siguiente:

addProduct(idDepartament: string, product: Product, image: File) {
   const id = this.db.createId();
   const document = this.db.doc(`departaments/${idDepartament}/products/${id}`);
   product.id = id;

  // Preparamos una Promesa para cuando se termine el trabajo con la imagen
  const p = new Promise<Product>((resolve, reject) => {
     if (image) {
        // Si existe la imagen, entonces la guardará en Firebase Storage
        const path = `images/${idDepartament}/${id}/${image.name}`;
        const ref = this.storage.ref(path);
        const task = this.storage.upload(path, image);
        task.snapshotChanges().pipe(
          // finalize no se ejecutará sino hasta que se guarde la imagen
          finalize(() => {
            ref.getDownloadURL().subscribe((data: string) => {
              product.image = data; 
              product.nameImage = image.name; 
              // Resolver la promesa con el producto actualizado
              resolve(product);
            });
          })).subscribe();
      } else {
        // Si no hay imagen, tendrá una por defecto
        product.image = './assets/img/noImage.png';
        // Resolver la promesa con el producto actualizado
        resolve(product);
      }
   });

   // Esperamos que se resuelva la promesa anterior
   return p.then((resultProduct) => {
      // Retorna una promesa para mostrar si todo salió bien, o hubo un problema en la subida del archivo
      return document.set(resultProduct);
   });
}
2
  • Tienes razón, implementé una Promesa y ya me resuelve correctamente la persistencia. ¿Cuáles podrían ser las otras formas que mencionas? Commented el 16 ago. 2018 a las 3:32
  • No fijate, no se me ocurre ninguna otra forma, por lo menos ninguna otra que sea tan eficiente ;)
    – Nery Ortez
    Commented el 16 ago. 2018 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.