Firebase Cloud Storage

Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

In this guide, you’ll learn how to use Firebase Storage to upload the pictures. Cloud Storage is a beautiful API because it lets you supercharge your application.

Instead of just text in the database, you can also store files like images, PDFs, documents, etc.

The first thing you need to do is to import the storage module:

import * as firebase from 'firebase/app';
import 'firebase/storage';

Then, you can create your function to upload the picture, create a function that receives the base64 string as a parameter:

async uploadPicture(imageString) {

}

After we have our function, let’s create a reference to where we’ll put our file:

async uploadPicture(imageString) {
 const storageRef = firebase
 .storage()
 .ref(`/guestProfile/profilePicture.png`);
}

After we create the reference, we need to upload the picture to Storage:

async uploadPicture(imageString) {
 const storageRef = firebase
 .storage()
 .ref(`/guestProfile/profilePicture.png`);

 const uploadedPicture = await storageRef.putString(guestPicture, 'base64', {
 contentType: 'image/png'
 });
}

And that’s it. We uploaded our picture to Cloud Storage, but what if we want to use that picture?

All we need to do is to get the picture’s downloadURL, then we can use it as we want, for that we can do this:

async uploadPicture(imageString) {
 const storageRef = firebase
 .storage()
 .ref(`/guestProfile/profilePicture.png`);

 const uploadedPicture = await storageRef.putString(guestPicture, 'base64', {
 contentType: 'image/png'
 });

 const downloadURL = await storageRef.getDownloadURL();
}

And now you can use that downloadURL anywhere you want, for example, if you want to show the profile picture on the website you can use the <img> tag like this:

<img [src]="downloadURL" />