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 instance and add it to the constructor:

import { Storage } from '@angular/fire/storage';

constructor(private readonly storage: 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:

import { Storage, ref } from '@angular/fire/storage';
async uploadPicture(imageString) {
  const storageRef = ref(this.storage, `/guestProfile/profilePicture.png`);
}

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

import { Storage, ref, uploadString } from '@angular/fire/storage';
async uploadPicture(imageString) {
  const storageRef = ref(this.storage, `/guestProfile/profilePicture.png`);

  const uploadedPicture = await uploadString(storageRef, imageString, 'base64');
}

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:

import { Storage, ref, uploadString, getDownloadUrl } from '@angular/fire/storage';

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

  const uploadedPicture = await uploadString(storageRef, imageString, 'base64');

  const downloadUrl = getDownloadURL(storageRef);
}

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