CODEWITHSUNDEEP
javascriptangularfirebase-storageangularfire2
dev_huesca
dev_huesca

Reputation: 516

Wait for angularfire storage upload

I'm doing the "complete your profile" part of my app and I want to upload some images to Firebase.

It is all done in 2 methods located in my "auth" service. I'm having issues getting the data from the uploads, this is the code so far:

async updateUserProfile(
    profilePicture: File,
    name: string,
    birthdate: Date,
    countryCode: string,
    photoID: File
  ) {
    let updatedAppUser: authenticatedUser;

    this.appUser.pipe(take(1)).subscribe((currentAppUser) => {
      updatedAppUser = currentAppUser;
    });

    const uploadPackage = new FormData();
    uploadPackage.append(updatedAppUser.UID, profilePicture);
    uploadPackage.append(updatedAppUser.UID + "_", photoID);

    let uploadedData = await this.fileUpload(uploadPackage);
    let profilePicturePath: string;
    let photoIDPath: string;

    //**********************************************
    //HERE IS THE PROBLEM-- I THINK THIS IS WRONG
    //**********************************************
    if (uploadedData) {
      profilePicturePath = uploadedData[0];
      photoIDPath = uploadedData[1];
    }

    //TO-DO: call backend and update the user profile

    //after success from backend call
    //console.log("photoID Path: ", photoIDPath);
    updatedAppUser.showKYC = false;
    updatedAppUser.userProfilePicture = profilePicturePath;
    updatedAppUser.isPendingValidation = true;
    updatedAppUser.userName = name;
    updatedAppUser.userBirthdate = birthdate;
    updatedAppUser.userCountryCode = countryCode;

    //save to local storage
    this.storeAuthData(updatedAppUser);

    //new updated appuser
    this.appUser.next(updatedAppUser);
  }

And this is the method I'm using to upload data to Firebase:

private async fileUpload(data: FormData) {
    const filePaths: string[] = [];
    const promises: AngularFireUploadTask[] = [];

    for (const value of data.entries()) {
      const uploadTask = this.firebaseStorage.ref(value[0]).put(value[1]);

      promises.push(uploadTask);
    }

    const promiseArray = await Promise.all(promises);
    if (promiseArray) {
      promiseArray.forEach(async (filePromise) => {
        filePaths.push(await filePromise.ref.getDownloadURL());
      });

      return filePaths;
    }
  }

Upvotes: 0

Views: 470

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599176

I'd probably use a second Promise.all for the download URL retrievals, and remove the use of await since it makes things confusing:

  private async fileUpload(data: FormData) {
    const promises: AngularFireUploadTask[] = [];

    for (const value of data.entries()) {
      const uploadTask = this.firebaseStorage.ref(value[0]).put(value[1]);

      promises.push(uploadTask);
    }

    Promise.all(promises).then((tasksArray) => {
      const filePaths = tasksArray.map((task) => task.ref.getDownloadURL());

      return Promise.all(filePaths);
    }
  }

Upvotes: 2

Related Questions