Angular firebase image saving before record saving to the database using concat

Question

I'm having issue in implementing the logic of saving image to firebase, getting back the url to the form img value and save the form value in the database, the issue is that while I get the form url updated correctly inside the firebase saving subscription, I get the same form url empty in the response of the second saving sub!

code:

  upload(): void {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;
    let currentFileUpload = new FileUpload(file);

    this.pushedFile$ = this.service.pushFileToStorage(currentFileUpload).pipe(
      map(url => {
        this.service.form.patchValue({ img: url });
        console.log("inside upload:", this.service.form.value)
      })
    );
  }

  onSubmit() {

    this.upload();
    
    let save$ = this.service.save(this.service.form.value).pipe(map(data => console.log("save data: ", data) ));

    concat(this.pushedFile$, save$).subscribe((data => console.log("subscription: ", data)));
  }

  pushFileToStorage(fileUpload: FileUpload): Observable<any> {
    const filePath = `${this.basePath}/${fileUpload.file.name}`;
    const storageRef = this.firebaseStorage.ref(filePath);
    const uploadTask = this.firebaseStorage.upload(filePath, fileUpload.file);

    return <Observable<any>>uploadTask.snapshotChanges().pipe(
      last(),
      mergeMap(() => {
        return storageRef.getDownloadURL().pipe(
          map((url) => url)
        )
      })
    );
}

inspector output:

licons/v109/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 abstract-form.component.ts:43 inside upload: {id: null, name: 'Sudan', nameAr: null, quantityPerUnit: null, img: 'https://firebasestorage.googleapis.com/v0/b/pos-ad…=media&token=960e9251-6ef8-4e01-8efa-a54745f9906f', …}averageCost: nullbarcode: nullcategory: nulldiscount: nullid: nullimg: "https://firebasestorage.googleapis.com/v0/b/pos-admin-f8a9f.appspot.com/o/products%2Fmaryam.jpg?alt=media&token=960e9251-6ef8-4e01-8efa-a54745f9906f"name: "Sudan"nameAr: nullquantity: nullquantityPerUnit: nullsellPrice: 11supplier: nullvatPercentage: nullvatValue: null[[Prototype]]: Object abstract-form.component.ts:54 subscription: undefined abstract-form.component.ts:52 save data: {id: 132, name: 'Sudan', nameAr: null, img: null, barcode: null, …}averageCost: nullbarcode: nullcategory: nulldepreciation: nulldiscount: nullid: 132img: nullname: "Sudan"nameAr: nullquantity: nullquantityPerUnit: nullsellPrice: 11supplier: nullvatPercentage: nullvatValue: null[[Prototype]]: Object abstract-form.component.ts:54 subscription: undefined

Samir Mustafa · Accepted Answer · 2021-10-20 05:39:33Z

0

I managed to get it working using concatAll()

let pushedFile$ = this.service.pushFileToStorage(currentFileUpload).pipe(map(url => item["img"] = url));

let combined$ = of(pushedFile$, save$);

combined$.pipe(concatAll()).subscribe();

answered Oct 20, 2021 at 5:39

Samir Mustafa

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular firebase image saving before record saving to the database using concat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related