Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49087

How to save multiple images at the same time in firebase using the photo camera with ionic and angular

$
0
0

How can I save multiple images to firebase at the same time? This code, what is done is every time you take a photo with the camera, an array of images (img) is generated, but when you click on upload, only one image is saved, as you could do to save all the images generated,

Complete and detailed code:

captureDataUrl: string;
alertCtrl: AlertController;

capture() {
    const options: CameraOptions = {
      quality: 50, 
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options)
      .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.imagesArray.push(this.captureDataUrl);
      }, (err) => {
      // Handle error
      
    });
  } // End of capture camera


  upload() {
    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(`images/${filename}.jpg`);

    imageRef.putString(this.captureDataUrl, firebase.storage.StringFormat.DATA_URL)
      .then((snapshot)=> {
        // Do something here when the data is succesfully uploaded!
         
      });
  }

the html component:

<ng-container *ngFor="let i of imagesArray;">
       <img src='{{i}}' /> 
  </ng-container>

 <ion-button ion-button (click)="capture()"> take a photo!</ion-button>
 <ion-button ion-button (click)="upload()"  >upload firebase!</ion-button>

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 49087

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>