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.

By the way, do you want to jump-start your development using the Firebase modular SDK with AngularFire?

Download my free book that will take you from creating an app to properly using Firebase Auth and Firestore.

Download the book now

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

import 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" />