Offline Programmer
CLOSE SEARCH

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

 

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

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