Offline Programmer

Upload Images to Firebase Storage Using Ionic Framework

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 ( 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


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).

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

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


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



We applied two changes:

  1. we imported Firebase
  2. we added the required details for initializing Firebase. you can get those details from (  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

Modify home.ts to the following:

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

Filed under: Android, AngularJS, ionic, Javascript, Uncategorized

  1. Diego
    how i show the pic?
  2. Michelle
    Hi I followed your guide, the taking pics work, but the select from gallery does not display the image in the app HTML page.
    • Michelle
      No, it's working now :) Thank you
  3. pbs
    Hi , I followed your guide but I get runtime error during the image upload saying "Uncaught(in promise): [object Object] . Seems the promise is not getting resolved inside uploadPhoto. Ionic Framework : 3.6.1 Ionic App Scripts: 2.1.4 Angular Core : 4.1.3 Angular Compiler CLI : 4.1.3 Node : 8.0.0 OS Platform : Win 7 Any inputs appreciated.
    • pbs
      Hi , this is resolved now. It was due to Storage's access permission. Thanks.
  4. Juan carlos
    i'm trying to save photos from camera using ionic 1, how did you get this working without using cordova plugin file?
  5. Sharanagouda
    How to upload Image to Amazon web service s3 using Ionic 2