Uploading images to Firebase using Ionic 2

Ionic Framework ionic-v3
1

@mhartington

I’m trying the following :
In my constructor:
this.fireAuth = firebase.auth(); // We are creating an auth reference.
this.userProfile = firebase.database().ref(’/userProfile’);
this.profilePictureRef = firebase.storage().ref(’/userProfilePhoto/’);

uploadProfilePhoto(profilePicture: any){

var user = this.fireAuth.currentUser;

alert(profilePicture);
alert(user.uid);

this.profilePictureRef.child(user.uid).putString(profilePicture, ‘base64’, { contentType: ‘image/png’ }).then((savedPicture) => {
alert(savedPicture.downloadURL);
this.userProfile.child(user.uid).update({
profilepicture: savedPicture.downloadURL});
})

}

but this doesn’t work.
I get the correct image URL with alert(profilePicture) and the correct userid with alert(user.uid). However, alert(savedPicture.downloadURL) does not get executed.
This means that .putString(profilePicture, ‘base64’, { contentType: ‘image/png’ }) itself did not execute.

I checked the firebase console as well. The image does not get uploaded to the corresponding firebase storage nor reaches the database. Could you please share your thoughts?

2

why dont you use:

let uploadTask = this.profilePictureRef.child(user.uid).put(profilePicture);

uploadTask.on(‘state_changed’,
(snapshot)=>{
console.log(“uploading”);
},(error)=>{
console.error(error);
},()=>{
console.log(“success”);
console.log(uploadTask.snapshot.downloadURL);
}

3

Tried your code:

uploadProfilePhoto(profilePicture: any){

var user = this.fireAuth.currentUser;

alert(profilePicture);
alert(user.uid);

let uploadTask = this.profilePictureRef.child(user.uid).put(profilePicture);

uploadTask.on(‘state_changed’,
(snapshot)=>{
console.log(“uploading”);
},(error)=>{
console.error(error);
},()=>{
console.log(“success”);
console.log(uploadTask.snapshot.downloadURL);
});

}

It still does not upload to firebase storage.

4

how do you select the profile picture?

5

Using an action sheet that gives an option of both camera and photo gallery

openActionSheet(){
console.log(‘opening’);
let actionsheet = this.actionSheetCtrl.create({
title:“Add Profile Picture”,
buttons:[
{
text: ‘Take a Photo’,
handler: () => {
console.log(“Camera Clicked”);
this.takePicture();

      }
  },
  {
    text: 'Pick from Gallery',
    handler: () => {
      console.log("Gallery Clicked");
      this.pickGallery();
    }
  },

   {
    text: 'Cancel',
    role: 'cancel',
    handler: function(){
      console.log("Cancel clicked");
    }
  }
  ]
});
actionsheet.present();

}

takePicture(){
Camera.getPicture({
quality : 95,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
cameraDirection: 1,
encodingType: Camera.EncodingType.PNG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: true
}).then( (imageData) => {
let base64Image = ‘data:image/jpeg;base64,’ + imageData;
this.profilephoto = base64Image;
}, error => {
console.log("ERROR -> " + JSON.stringify(error));
});
}

pickGallery(){
let options = {
maximumImagesCount: 1,
width: 800,
height: 800,
quality: 75
}
ImagePicker.getPictures(options).then(
(result) => {this.profilephoto = result;},
(err) => {}
);

}