Firebase allows us to upload an image. Here we are learning how to upload a photo from the photo gallery to Firebase server.
Step 1: Setting up Apps
We have to create a project in Firebase for an ionic app we have to select web app.
On clicking on the web app we will get API from Firebase project and add this code and import firebase in app.components.ts as a highlight.
By default we need authentication to use storage in Firebase, so for this example, we are not using any authentication. We have to change the storage rule as
Step 2: Adding user interface for Apps
Add the following code in home.ts file, we will create a button to take an image from the photo gallery.
Step 3: Adding code for uploading photo to firebase
The getPicture(sourceType) method we are passing zero as an argument, as in camera option, source type zero is for selecting an image from gallery and getPicture(1) for selecting the photo from the camera.
To upload photo, we will first need to get the root storage reference via firebase.storage().ref(). After that, we need to set file path in Firebase Storage. In this app, we have defined that all pictures must be inside a path ./images/filename-.jpg.
Once we have image path reference we will need to do the actual uploading using the
The function requires 2 parameters, which is the data of the actual picture, and the format of the data.
In the code below, since our picture was captured by the camera and stored inside the captureDataUrl, with the format of DATA_URL, we will need to tell Firebase that we will be uploading in that format:
Add the camera provider in app.module.ts file