Add Firebase Storage Support to AngularFire2

First Published: 6 December 2017
Updated on: 24 September 2018

Have you tried to integrate Firebase Storage when using AngularFire2 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 AngularFire2 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?

NOTE: Since it hasn’t been publicly released, you might need to install it as angularfire2@next

AngularFire2 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 'angularfire2';
import { AngularFireStorageModule } from 'angularfire2/storage';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp({
      // Your config details
    }),
    AngularFireStorageModule
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [...]
})
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,
  AngularFireStorageReference,
  AngularFireUploadTask
} from 'angularfire2/storage';

All you need to import is AngularFireStorage, I’m importing the other two because I like stronger type settings, but it’s not necessary.

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): AngularFireUploadTask {}

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): AngularFireUploadTask {
  const storageRef: AngularFireStorageReference = this.afStorage
    .ref(`/selfies/jorge.png`);
}

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

takeBillPhoto(imageURL: string): AngularFireUploadTask {
  const storageRef: AngularFireStorageReference = 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.

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.