In this tutorial we are going to use Ionic 2 App to upload images to Firebase Storage.

Before writing any code follow Ionic Framework documentations to make sure that your development environment is up to date.

Let’s start by Firebase setup. Go to Firebase Console (https://console.firebase.google.com/) and create a new Project, call it myPhotos

On Storage create a new folder call it Photos







Now let’s create the App by running the command below through the Command Prompt

ionic start 1 2 3 ionic start

Assuming you are using the latest ionic release; this command will open a browser window with the new GUI tool used to create apps. Follow the simple steps to create myPhotos App as shown below. This will create a new folder for the App. You need to use that folder in the Command Prompt.

Now let’s install Firebase by running the command below in the Command Prompt (remember you should already be in the project folder).

npm install firebase --save 1 2 3 npm install firebase -- save

Next we need to add Ionic Native to our app by running the following command

npm install ionic-native --save 1 2 3 npm install ionic -native -- save

We need the Camera Cordova Plugin. use the command below to install it

ionic plugin add cordova-plugin-camera 1 2 3 ionic plugin add cordova -plugin -camera

Now we have everything ready to start coding. Let’s start by connecting to our Firebase project. change app.component.ts to the following

import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar, Splashscreen } from 'ionic-native'; import { HomePage } from '../pages/home/home'; import firebase from 'firebase'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage = HomePage; constructor(platform: Platform) { firebase.initializeApp({ apiKey: "<your-apikey>", authDomain: "<your-authDomain>", databaseURL: "<your-databaseURL>", storageBucket: "<your-storageBucket>", messagingSenderId: "<your-messagingSenderId>" }); 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(); }); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 import { Component } from '@angular/core' ; import { Platform } from 'ionic-angular' ; import { StatusBar , Splashscreen } from 'ionic-native' ; import { HomePage } from '../pages/home/home' ; import firebase from 'firebase' ; @ Component ( { templateUrl : 'app.html' } ) export class MyApp { rootPage = HomePage ; constructor ( platform : Platform ) { firebase . initializeApp ( { apiKey : "<your-apikey>" , authDomain : "<your-authDomain>" , databaseURL : "<your-databaseURL>" , storageBucket : "<your-storageBucket>" , messagingSenderId : "<your-messagingSenderId>" } ) ; 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 ( ) ; } ) ; } }

We applied two changes:

we imported Firebase we added the required details for initializing Firebase. you can get those details from (https://console.firebase.google.com) as shown below

Now let’s modify the home.html to add a button to allow the user to select from the Gallery and button to start the camera to start the camers

<ion-header> <ion-navbar> <ion-title> My Photos </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-row> <ion-col width-50> <button ion-button color="danger" type="button" full round large (click)="takePhoto()"> <ion-icon name="md-camera"></ion-icon> </button> </ion-col> <ion-col width-50> <button ion-button color="secondary" type="button" full round large (click)="selectPhoto()"> <ion-icon name="md-image"></ion-icon> </button> </ion-col> </ion-row> </ion-item> <ion-item> <img class="img-responsive" src="{{ myPhotoURL }}" /> </ion-item> </ion-content> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <ion-header> <ion-navbar> <ion-title> My Photos </ion-title> </ion-navbar> </ion-header> <ion-content padding > <ion-item> <ion-row> <ion-col width - 50 > <button ion - button color = "danger" type = "button" full round large ( click ) = "takePhoto()" > <ion-icon name = "md-camera" > </ion-icon> </button> </ion-col> <ion-col width - 50 > <button ion - button color = "secondary" type = "button" full round large ( click ) = "selectPhoto()" > <ion-icon name = "md-image" > </ion-icon> </button> </ion-col> </ion-row> </ion-item> <ion-item> <img class = "img-responsive" src = "{{ myPhotoURL }}" /> </ion-item> </ion-content>

Modify home.ts to the following:

import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Camera } from 'ionic-native'; import firebase from 'firebase'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public myPhotosRef: any; public myPhoto: any; public myPhotoURL: any; constructor(public navCtrl: NavController) { this.myPhotosRef = firebase.storage().ref('/Photos/'); } takePhoto() { 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(); }, error => { console.log("ERROR -> " + JSON.stringify(error)); }); } selectPhoto(): 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(); }, error => { console.log("ERROR -> " + JSON.stringify(error)); }); } private uploadPhoto(): void { this.myPhotosRef.child(this.generateUUID()).child('myPhoto.png') .putString(this.myPhoto, 'base64', { contentType: 'image/png' }) .then((savedPicture) => { this.myPhotoURL = savedPicture.downloadURL; }); } private generateUUID(): any { var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { Camera } from 'ionic-native' ; import firebase from 'firebase' ; @ Component ( { selector : 'page-home' , templateUrl : 'home.html' } ) export class HomePage { public myPhotosRef: any ; public myPhoto: any ; public myPhotoURL: any ; constructor ( public navCtrl: NavController ) { this . myPhotosRef = firebase . storage ( ) . ref ( '/Photos/' ) ; } takePhoto ( ) { 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 ( ) ; } , error = > { console . log ( "ERROR -> " + JSON . stringify ( error ) ) ; } ) ; } selectPhoto ( ) : 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 ( ) ; } , error = > { console . log ( "ERROR -> " + JSON . stringify ( error ) ) ; } ) ; } private uploadPhoto ( ) : void { this . myPhotosRef . child ( this . generateUUID ( ) ) . child ( 'myPhoto.png' ) . putString ( this . myPhoto , 'base64' , { contentType : 'image/png' } ) . then ( ( savedPicture ) = > { this . myPhotoURL = savedPicture . downloadURL ; } ) ; } private generateUUID ( ) : any { var d = new Date ( ) . getTime ( ) ; var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx' . replace ( /[xy]/g , function ( c ) { var r = ( d + Math . random ( ) * 16 ) % 16 | 0 ; d = Math . floor ( d / 16 ) ; return ( c == 'x' ? r : ( r & 0x3 | 0x8 ) ) . toString ( 16 ) ; } ) ; return uuid ; } }

In the code above we are doing the following

Importing Firebase to home.ts

Setting a reference (myPhotosRef) to our Firebase Storage project

takePhoto() function to start the camera and capture photo

selectPhoto() function to select a photo from gallery

uploadPhoto() function to upload to Firebase Storage and using the downloadURL to display the photo

Follow Ionic Documentations to test this on a device and you will get the screen below









Get the full code from Github