Uploading multiple images to Firebase using Array

Ionic Framework Ionic Angular
1

Hi All,

I’ve been trying to upload multiple images to my Firebase from an Array which holds the images which a user selects from their device.

Currently, when a user selects 2 or more images. only one image uploads to the database. I am relatively new to Ionic development - all help is appreciated!

Thanks in advance - please find current code below

getImage() {
    const optionsGallery: CameraOptions = {
      quality: 100,
      targetWidth: 1080,
      targetHeight: 1080,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,

    };

    this.camera.getPicture(optionsGallery)
      .then((imageData) => {
        // imageData is either a base64 encoded string or a file URI // If it's base64:
        this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
        this.productImages.push(this.captureDataUrl);
      }, (err) => {
      // Handle error
      console.log(err);
    });
  }

  upload() {

   this.productImages.array.forEach(element => {
    let storageRef = firebase.storage().ref();
    // Create a timestamp as filename
    const filename = Math.floor(Date.now() / 1000);

    // Create a reference to 'images/todays-date.jpg'
    const imageRef = storageRef.child( firebase.auth().currentUser.uid + `/${filename}.jpg`);

    let i = 0;

    for (i; i < this.productImages.length; i++)  {

    console.log('After the for loop' + this.productImages.length);

    imageRef.putString(this.productImages[i], firebase.storage.StringFormat.DATA_URL)
      .then((snapshot) => {
          // Do something here when the data is succesfully uploaded!
        this.showSuccesfulUploadAlert();
      }).catch((err) => {
        console.log(err.message);
      });
    // }
   });
  }

  async showSuccesfulUploadAlert() {
    const toast = await this.toastController.create({
      message: 'Image uploaded successfully',
      duration: 5000
    });
    toast.present();
    // clear the previous photo data in the variable
	
    // this.captureDataUrl = "";
    console.log('This is the last line: ' + this.captureDataUrl.length);

  }
2

Check out this post for some terminology.

I would suggest breaking your code down into very small building blocks, and declaring proper types for all function parameters and return values of each building block. Decide which of those three types (in the linked post) of functions each needs to be, and type accordingly.

Do not touch this inside these building blocks. Make each static if that helps. Every block has to be totally self-contained, taking everything it needs as a parameter and returning whatever its caller will rely on.

This exercise helps me untangle complex operations and understand what improper assumptions I am making about state management and asynchronous event timing. I think it will help you in this situation as well.

3

Thank you for your reply

As i am relatively new to Ionic development it is more difficult for me to apply information from sources which is in a different context.

Do you have any suggestions regarding the code i have posted above?