firebase upload image not working on ionic 3

Question

i don't know why but i have followed so many instruction on the web but seems i cannot work it when i try to use the second parameter for the function .putString it always return this error :

[object Object]
at viewWrappedDebugError (core.js:9503)
at callWithDebugContext (core.js:14749)
at Object.debugHandleEvent [as handleEvent] (core.js:14326)
at dispatchEvent (core.js:9703)
at core.js:10317
at HTMLButtonElement.<anonymous> (platform-browser.js:2614)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4617)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)

the is not help for me so can anybody help me on this heres my code:

captureDataUrl: string;
capture() {
 //setup camera options
 const cameraOptions: CameraOptions = {
   quality: 50,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE,
 };
 this.camera.getPicture(cameraOptions).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64:
   this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
   alert(this.captureDataUrl);
 }, (err) => {
    alert(err);
 });
}
upload() : AngularFireUploadTask {

const filename = 'filename';

this.afStorage.ref(`users/${filename}.jpg`)
 .putString(this.captureDataUrl,'data_url')
 .then((snapshot)=>{
    alert(snapshot);
 })
 .catch((err)=>{
    alert(err);
 }) 

}

RicardoVallejo RicardoVallejo · Accepted Answer · 2018-02-27T12:11:17

From my point of view everything is correct...

Here you can find my approach:

  public refPhoto: firebase.storage.Reference = firebase.storage().ref('/Photos');
  public myPhoto: any;



  //Camera and upload
  takePhoto(uid: string) {
    Camera.getPicture({
      quality: 100,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      encodingType: Camera.EncodingType.PNG,
      saveToPhotoAlbum: true
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(uid);
    }).catch((err) => {
      console.log(err);
      console.log('Cant take photo');
    });
  }

  selectPhoto(uid: string): void {
    Camera.getPicture({
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: Camera.DestinationType.DATA_URL,
      quality: 100,
      encodingType: Camera.EncodingType.PNG,
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(uid);
    }).catch((err) => {
      console.log(err);
      console.log('Cant select photo');
    });
  }

  private uploadPhoto(uid: string): void {
    this.refPhoto.child(this.fire.auth.currentUser.uid).child('profileImage.png')
      .putString(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        //good practice is to store this reference ID to Database
      }).catch((err) => {
        console.log(err);
        console.log('Cant upload photo');
      });
  }

Hope it helps!

firebase upload image not working on ionic 3

1 Answers