Ionic 2 – Serving images with Firebase-Storage

Hi Friends,

Hope you are all well. I apologise for a long delay in between my previous post and this one. In this post we’ll see how to use firebase-storage to store our images in our Ionic 2 apps.

Let’s begin.

A screencast of this post.

Code for this post can be found – here.

First let’s scaffold out an app using Ionic Cli.

Once the app is ready we’ll install firebase and AngularFire2.

Once these are installed then kindly open up app.module.ts file and configure your app to use firebase.

As per existing firebase rules it allows only authenticated users to access firebase-storage. So let’s create a login page using the below command.

Add this LoginPage in app.module.ts as well. The finished app.module.ts file would look as shown below.

Now open up login.html and add the below code.

This will simply create two fields and a button.

Open up login.ts and add the below code.

This will simply allow a user to sign in. Now to show the login page to an unauthenticated user open up app.component.ts file in the app directory and change the rootPage to LoginPage as shown below.

Now that we have created a login system for the user, let’s move on.

Open up home.html.

We are going to add two buttons here. One for enabling the user to choose a picture from his phone and the other to get the image from and show it on the screen.

(Add this between the ion-content tags).

Now we need three plugins to proceed.

  1. File-chooser – To select a file from your phone.
  2. File-Path – To get the nativeURL of the selected file.
  3. File – To get the LocalFileSystemURL of the selected file.

Install these three plugins using the below commands.

After installing these plugins open up home.ts file and modify it as shown below.

Let’s break this down.

First we are choosing a file from our phone in the store() function and then the nativePath of the file is obtained. Then uploadimage() function is being called.

In the uploadimage() function we get the LocalFileSystemURL of the same file and then create a reader to read this file as a ArrayBuffer.

Once this file is read, we create a new Blob from it. This blob is then stored on firebase-storage simply using the put method. These few lines do exactly that.

Now to display the stored image, we simply need to get the download url for that image. That’s exactly what we are doing with the display() function. Then we are using zone to update imgsource variable which are using in the <img> tag to display our image on the mobile screen.

That’s it, that’s exactly what we need to store an image in firebase storage and retrieve it.

Run this code and try uploading an image and displaying it.

You could also go to the firebase console and you would be able to see the image you stored as shown below.


Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.


Liked it? Take a second to support admin on Patreon!
  • Golda-Lee Sawyers

    Thank you for yet another great tutorial. How do you search through a list of items that firebase (ionic 2) serves up using a search bar?

  • Pinbandit com i was always under the impression the store ref always needs to be pushed to database prior to displaying the image?

  • Euloge Ngoma

    hi, i want to add text input. how can i do it?

  • Euloge Ngoma

    i need you help to make a form with input type=text, input type=file and input type=int and save all form phone to firebase…

  • Umar Rasheed

    Is that same Filechooser and File plugins we could use for getting files path from IOS phone?

    • I haven’t tried that on an iOS phone bro.. I am sorry.. iPhones are extremely costly in India.. (I have to sell a kidney if I wanted to buy one..)

  • Satabdi Roy

    How can I specify what will be the size of the image?

  • Musingzi Apollo

    am being told this while try running the chat app wat can do????

    [05:34:02] tslint: E:/NODE16/node16/src/providers/imghandler/imghandler.ts, line: 2
    All imports are unused.

    L1: import { Injectable } from ‘@angular/core’;
    L2: import { File } from ‘@ionic-native/file’;
    L3: import { FileChooser } from ‘@ionic-native/file-chooser’;

    [05:34:02] tslint: E:/NODE16/node16/src/providers/imghandler/imghandler.ts, line: 4
    All imports are unused.

    L3: import { FileChooser } from ‘@ionic-native/file-chooser’;
    L4: import { FilePath } from ‘@ionic-native/file-path’;
    L5: import firebase from ‘firebase’;

  • Deniz Gelir

    How can i load images from firebase storage???