Angular 5 – Firebase Storage with Angularfire 2

Hi Friends,

Hope you are well. In this post, we are going to see how to use the newly added firebase storage support from the AngularFire2 library.

Let’s begin.

A screencast of this post

In this post we’ll see how to use Angularfire 2 library to store an image in firebase storage.

Scaffold out an application, and configure firebase in it. Since we have already discussed a lot on this in my previous posts, Let’s not go into details about this.

Now open up app.module.ts and add imports for everything. Your app.module.ts file would look like below.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatProgressBarModule, MatButtonModule } from '@angular/material';


import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

import { AngularFireStorageModule } from 'angularfire2/storage';

import { environment } from '../environments/environment';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.config),
    AngularFireStorageModule,
    MatProgressBarModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatProgressBarModule, MatButtonModule } from '@angular/material';

import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';

import { AngularFireStorageModule } from 'angularfire2/storage';

import { environment } from '../environments/environment';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule,

BrowserAnimationsModule,

AngularFireModule.initializeApp(environment.config),

AngularFireStorageModule,

MatProgressBarModule,

MatButtonModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

(I have installed Material 2 as well. So I have added imports for those too.)

Open up app.component.html and add the below code.

<!--The content below is only a placeholder and can be replaced.-->
<button mat-raised-button color="primary" (click)="fileInput.click()">Click</button>
  <input #fileInput type="file" (change)="chooseFiles($event)" style="display:none;" />

<img style="height: 400px; width: 400px;" src="{{imgsrc | async}}">

<div> {{ progressBarValue }}</div>

<mat-progress-bar
    [color]="color"
    [mode]="mode"
    [value]="progressBarValue">
</mat-progress-bar>

<button mat-raised-button color="primary" (click)="fileInput.click()">Click</button>

<div> {{ progressBarValue }}</div>

<mat-progress-bar

[color]="color"

[mode]="mode"

[value]="progressBarValue">

</mat-progress-bar>

This will add a button which upon clicking will open up file chooser dialog.

Open up app.component.ts and add the below code.

import { Component } from '@angular/core';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  selectedFiles: FileList;
  file: File;
  imgsrc;
  color: string = 'primary';
  mode: 'determinate';
  progressBarValue;

  constructor(private storage: AngularFireStorage) {

  }

  chooseFiles(event) {
    this.selectedFiles = event.target.files;
    if (this.selectedFiles.item(0))
      this.uploadpic();  
  }

  uploadpic() {
    let file = this.selectedFiles.item(0);
    let uniqkey = 'pic' + Math.floor(Math.random() * 1000000);
    const uploadTask = this.storage.upload('/angfire2store/' + uniqkey, file);

    this.imgsrc = uploadTask.downloadURL();

    uploadTask.percentageChanges().subscribe((value) => {
      this.progressBarValue = value.toFixed(2);
    })
  }
}

import { Component } from '@angular/core';

import { AngularFireStorage } from 'angularfire2/storage';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

selectedFiles: FileList;

file: File;

imgsrc;

color: string = 'primary';

mode: 'determinate';

progressBarValue;

constructor(private storage: AngularFireStorage) {

}

chooseFiles(event) {

this.selectedFiles = event.target.files;

if (this.selectedFiles.item(0))

this.uploadpic();

}

uploadpic() {

let file = this.selectedFiles.item(0);

let uniqkey = 'pic' + Math.floor(Math.random() * 1000000);

const uploadTask = this.storage.upload('/angfire2store/' + uniqkey, file);

this.imgsrc = uploadTask.downloadURL();

uploadTask.percentageChanges().subscribe((value) => {

this.progressBarValue = value.toFixed(2);

})

}

The above code does many things.

The chooseFiles() function is the one that actually enables you to select a file.
uploadpic() function is the one that uploads the file onto firebase storage.
(Now, this might not work in your app since storing a file on firebase always requires authentication. I have disabled the rules and that’s why it works)
The percentageChanges() will return an observable that will send you the value which you can then display on a progressBar.
Once the file is uploaded it will be displayed in the image tag. (If you upload an image file).

This is a very simple example on how you could use angularfire2 to store files on firebase storage. In our forthcoming posts. We’ll see detailed use-cases of this in action

Hope this helped you guys. If you found this helpful, kindly share it with someone else and help them too.

Thanks for reading. Peace..:)

Follow me

Liked it? Take a second to support admin on Patreon!

T-Pub :)

The Techies' pub

Angular 5 – Firebase Storage with Angularfire 2

Read previous post:

Ionic 3 – Phone Auth with Accountkit