Js Mobile Dev About Courses Articles Youtube Services Contact

Firebase Cloud Storage

Libraries and Versions

Backend: Firebase v7.7.0
Frontend: @ionic/angular v5.3.0

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

Become a Mobile Developer using JavaScript

Leave your email below and you'll get one or two emails a month sharing articles, videos, or courses that will help you jump-start your development with Ionic, Firebase, and Angular 🚀.

    I don't do the spam thing, you can one-click unsubscribe at any time