CODEWITHSUNDEEP
angularfirebaseionic2
Ali H
Ali H

Reputation: 923

Can't upload captured images to firebase storage

I'm trying to did small application by Ionic 2 that allows me to capture images by camera and upload all captured image into firebase storage and store captured image URL into firebase database.

I did these tutorials but It doesn't work and no images uploaded to firebase storage,

Links

http://www.offlineprogrammer.com/upload-images-firebase-storage-using-ionic-framework/ https://www.youtube.com/watch?v=6yGrLWq-oIo

These my codes u may want to see if I did some mistakes

app.component.ts

...
import firebase from 'firebase';
...
constructor(...) {

platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
});

firebase.initializeApp({
  apiKey: "XXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXX",
        databaseURL: "XXXXXXXXXXX",
        projectId: "XXXXXXXXX",
        storageBucket: "XXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXX"
  });

}

home.html 

<ion-content class="footer">
  <ion-item>
  <img class="img-responsive" src="{{ myPhotoURL }}" />
  </ion-item>
</ion-content>

home.ts

export class HomePage{
  public myPhotosRef: any;
  public myPhoto: any;
  public myPhotoURL: any;

  constructor(...){
    this.myPhotosRef = firebase.storage().ref('/Photos/');
  }

  takePicture(){
    const options: CameraOptions = {
      quality: 80,
      destinationType: this.camera.DestinationType.DATA_URL,
      sourceType: this.camera.PictureSourceType.CAMERA,
      allowEdit: true,
      encodingType: this.camera.EncodingType.JPEG,
      saveToPhotoAlbum: false
    }
    this.camera.getPicture(options).then((imageData) => {
      this.myPhoto = imageData;
      this.uploadPhoto();
    });
  }

  private uploadPhoto(): void {
    this.myPhotosRef.child(this.generateUUID()).child('myPhoto.png')
      .put(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        this.myPhotoURL = savedPicture.downloadURL;
    });
  }

  private generateUUID(): any {
    let d = new Date().getTime();
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
      let r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }
}

Upvotes: 3

Views: 620

Answers (2)

Ali H
Ali H

Reputation: 923

I solved the problem by did these changes

takePicture(){
const options: CameraOptions = {
  quality : 75,
        destinationType : this.camera.DestinationType.DATA_URL,
        sourceType : this.camera.PictureSourceType.CAMERA,
        allowEdit : true,
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
        this.myPhoto = imageData;
  this.uploadPhoto();
    });
}

private uploadPhoto(): void {
this.myPhotosRef.child(this.generateUUID()).child('myPhoto.JPEG')
  .putString(this.myPhoto, 'base64', { contentType: 'image/JPEG' })
  .then((savedPicture) => {
    this.myPhotoURL = savedPicture.downloadURL;
  });
}

Upvotes: 0

Sampath
Sampath

Reputation: 65870

You have to replace JPEG with PNG as shown below hence your contentType: 'image/png'.

 encodingType: this.camera.EncodingType.PNG,

and also set this as true

saveToPhotoAlbum: true

Upvotes: 2

Related Questions