NgFirebaseFileUpload

NgFirebaseFileUpload is an angular library which provides out of the box functionality for uploading files with firebase.

Dependencies

Angular (Tested with angular 4+)

firebase (Tested with Version 5.5.7)

Prerequisites

Hopefully you should have already set up angular and firebase on your application before seeking out this functionality. Just in case you have not, please

• Set up angular here
• Set up firebase here

Installation

Run the following npm command.

npm install --save ng-firebase-file-upload

Once installed you need to import the module where it is needed.

NB: The AppModule is used as an example. But note that this could be any module

import {NgFirebaseFileUploadModule} from 'ng-firebase-file-upload';

@NgModule({
  ...
  imports: [
    NgFirebaseFileUploadModule,
    ...
  ],
  ...
})
export class AppModule { }

Usage

This is a custom file input so can be used as such.

For example in a reactive form with a FormControl called avatar, we can use it as such:

<ng-firebase-file-upload formControlName="avatar"></ng-firebase-file-upload>

For example in a template driven form with an avatar attribute, we can use it as such:

<ng-firebase-file-upload [(ngModel)]="avatar"></ng-firebase-file-upload>

NB: 
The component comes with default styling. 
And you can style this component in your application however you like.