Thank you for the Help! i got it working after reviewing your code you linked. I hope Ionic and Firebase provide better integration documentation, that was not easy to understand without your help.
I still have some code clean up, but for others future reference below is the code to my profile.ts which uses a profile-data.ts Provider to read/write to Firebase.
import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { Platform, ActionSheetController } from 'ionic-angular';
import { Camera } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { ProfileData } from '../../providers/profile-data';
import { AuthService } from '../../providers/auth-service';
import firebase from 'firebase';
import {TabsPage} from '../tabs/tabs';
declare var window: any;
/*
Generated class for the Profile page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {
tabsPage = TabsPage;
public userProfile: any;
testRadioOpen: boolean;
public relationship: any;
public file: any;
public profilePic: any;
public blob: any;
public photoURL: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public profileData: ProfileData, public alertCtrl: AlertController, public actionSheetCtrl: ActionSheetController, public platform: Platform) {
this.profileData = profileData;
this.profileData.getUserProfile().on('value', (data) => {
this.userProfile = data.val();
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}
getPicture() {
// get picture from camera
//console.log(Device)
//let imageSource = (Device.isVirtual ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA);
Camera.getPicture({
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.FILE_URI,
quality: 100,
targetWidth: 500,
targetHeight: 500,
encodingType: Camera.EncodingType.JPEG,
correctOrientation: true
}).then((_imagePath) => {
//alert('got image path ' + _imagePath);
// convert picture to blob
return this.makeFileIntoBlob(_imagePath);
}).then((_imageBlob) => {
//alert('got image blob ' + _imageBlob);
// upload the blob
return this.uploadToFirebase(_imageBlob);
}).then((_uploadSnapshot: any) => {
//alert('file uploaded successfully ' + _uploadSnapshot.downloadURL);
// store reference to storage in database
return this.saveToUserProfile(_uploadSnapshot);
}).then((_uploadSnapshot: any) => {
//alert('file saved to asset catalog successfully ');
}, (_error) => {
alert('Error ' + (_error.message || _error));
});
}
makeFileIntoBlob(_imagePath) {
// INSTALL PLUGIN - cordova plugin add cordova-plugin-file
return new Promise((resolve, reject) => {
window.resolveLocalFileSystemURL(_imagePath, (fileEntry) => {
fileEntry.file((resFile) => {
var reader = new FileReader();
reader.onloadend = (evt: any) => {
var imgBlob: any = new Blob([evt.target.result], { type: 'image/jpeg' });
imgBlob.name = 'sample.jpg';
resolve(imgBlob);
};
reader.onerror = (e) => {
console.log('Failed file read: ' + e.toString());
reject(e);
};
reader.readAsArrayBuffer(resFile);
});
});
});
}
uploadToFirebase(_imageBlob) {
var fileName = 'sample-' + new Date().getTime() + '.jpg';
return new Promise((resolve, reject) => {
var fileRef = firebase.storage().ref('/userProfile/' + this.profileData.currentUser.uid + '/' + fileName);
var uploadTask = fileRef.put(_imageBlob);
uploadTask.on('state_changed', (_snapshot) => {
console.log('snapshot progess ' + _snapshot);
}, (_error) => {
reject(_error);
}, () => {
// completion...
resolve(uploadTask.snapshot);
});
});
}
saveToUserProfile(_uploadSnapshot) {
this.photoURL = _uploadSnapshot.downloadURL;
this.profileData.updateProfilePic(this.photoURL);
}
profilePicActionSheet() {
let profilePicSheet = this.actionSheetCtrl.create({
title: 'Upload your Profile Picture',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Take a Picture',
role: 'destructive',
icon: !this.platform.is('ios') ? 'camera' : null,
handler: () => {
console.log('Take a Picture clicked');
}
},{
text: 'Select from Gallery',
icon: !this.platform.is('ios') ? 'images' : null,
handler: () => {
console.log('Select from Gallery clicked');
this.getPicture();
}
},{
text: 'Cancel',
role: 'cancel',
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
profilePicSheet.present();
}
}
