firebase upload & get photo with ionic 2 - ionic-framework

Question

I'm trying to upload an get photo in my Ionic 2 app. I succeeded to run the camera and save the photo in Firebase but not to get and display it on my app. I'm not sure i'm doing it right, the save in Firebase.
I put here my code.
add-note.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Camera } from 'ionic-native';
import {NotesData} from "../../providers/notes-data";
/*
Generated class for the AddNote page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-add-note',
templateUrl: 'add-note.html'
})
export class AddNote {
public notePicture: any;
constructor(public navCtrl: NavController,public notesData:NotesData) {}
ionViewDidLoad() {
}
addNote() {
this.notesData.addPhoto(this.notePicture);
this.navCtrl.pop();
}
takePicture(){
Camera.getPicture({
quality : 95,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.PNG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: true
}).then(imageData => {
this.notePicture = imageData;
}, error => {
console.log("ERROR -> " + JSON.stringify(error));
});
}
}
note-data.ts //provider for notes to upload the photo to firebase
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import firebase from 'firebase'
/*
Generated class for the NotesData provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class NotesData {
//user data
public currentUser: any;
public profilePictureRef: any;
//notedata
public notesList: any;
//firebase data
public photoRef:any;
constructor() {
this.currentUser = firebase.auth().currentUser.uid;
this.fireRef=firebase.database().ref();
this.photoRef=firebase.database().ref('users/'+this.currentUser+'/photos');
this.notesList =
}
addPhoto(notePicture:any){
this.photoRef.push({id:"data:image/jpeg;base64,"+notePicture});
}
}
my firebase structure photo

Answer 1

You want to use Firebase Storage and store URLs in your Firebase. You're going to cost yourself a lot of extra money and headaches by storing your image data in the realtime database.
The new SDKs have great APIs for uploading images that can be publicly accessed.

Answer 2

Don't save the whole url, just save short path. As you can find at my blog post about uploading, and getting data from firebase storage, it's just 2 lines of code to get actual url with permissions.
this.storageRef = firebase.storage().ref().child('images/image.png');
this.storageRef.getDownloadURL().then(url =>
console.log(url)
);

Answer 3

you can use angular-firebase npm package it is simple and easy to use
npm install angular-firebase
and you can simply upload the captured base 64 image
with this code
this.firebase.uploadString(encodedFile,'images/1.jpg','base64',
(v)=>{
console.log('Upload progress :'v + '% uploaded');
// event detect the data uploaded used to monitor the persentage of the download process
// this will return 'Upload progress : 24% uploaded'
// for example
}).then((url)=>{
console.log(url);
//the URL of uploaded file or image
});