Js Mobile Dev About Courses Articles Youtube Services Contact

Add Firebase Storage Support to AngularFire

Libraries and Versions

Backend: Firebase v7.7.0
Frontend: @ionic/angular v5.0.0
Backend: @angular/fire v6.0.0

Have you tried to integrate Firebase Storage when using @angular/fire in one of your apps?

Is it even possible? Are you adding extra bloat to your app from the JS SDK? Will the code be easy to maintain in the future?

Those are some of the questions that are probably worrying you right now because let's face it, the last thing you want is that after all your hard work, you end up with a nightmare of a code base to maintain.

Or with an app so bloated with all the extra packages that your users start to feel the lag.

Until now, the only choice you've had is to import the entire JavaScript SDK to use Firebase storage (which can lead you to feel like your app is too bloated).

That changes now. The angularfire team has been working non-stop on adding all the functionality we need to use Storage (and some neat tricks I'll show you later) and just pushed the changes to npm.

How does it work?

Angularfire breaks up Firebase features into separate modules. This reduces bundle size by including only the features your app needs.

If you're planning on using Storage and no other Firebase API, you can add only that package and forget about the bloat from the rest of the packages you don't need.

For example, if you go to app.module.ts, you can import and initialize AngularFire and Storage:

import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';
import 'firebase/storage';

  declarations: [...],
  imports: [
      // Your config details
export class AppModule {}

That way you don't have to worry about pulling the entire database package or the authentication package, you only use what you need.

How do you use it?

You just saw how to import it into your app, now to use it you have two main ways of uploading files:

  • Create a reference and use .put() or .putString() methods.
  • Use the .upload() method that creates the reference for you while uploading the file.

One of the most common file types you'll be uploading in a mobile app is a picture, so we'll see how the .putString() method works. You can directly pass it a base64 string.

The first thing you'd want to do is to import it into your component:

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

All you need to import is AngularFireStorage.

After importing, it's ready to use, create a function to upload the picture, and it should take the base64 string as a parameter:

takeBillPhoto(imageURL: string) {}

Inside the function, create a reference to Firebase Storage. A reference is the path where you want your picture to be saved.

Think about it like a collection of folders and files. I want to store my picture in a folder called selfies and want to name my picture jorge.png.

takeBillPhoto(imageURL: string) {
  const storageRef = this.afStorage.ref(`/selfies/jorge.png`);

And lastly, use the .putString() method on that reference passing the appropriate metadata.

takeBillPhoto(imageURL: string) {
  const storageRef = this.afStorage.ref(`/selfies/jorge.png`);

  return storageRef.putString(imageURL, 'base64', {contentType: 'image/png'});

You're passing the base64 string (as imageURL), then you tell Firebase that you're sending a base64 string, and lastly you tell them that it's an image of type png.

That will create a folder called selfies inside your storage bucket and inside, store the file jorge.png with the right metadata.

Next Steps

If you have any questions don't forget you can always leave a comment below.

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