File-store-lib NPM

file-store-lib

An independent Angular library to upload data files to Firebase Storage.

Installation

To install this library, run:

$ npm install file-store-lib --save

Consuming the `file-store-lib` library

Since the library depends on a valid Firebase configuration be setup in your Angular application, you've to setup the firebase configuration as applicable in your AppModule.

Import file-store-lib library in any Angular application by running:

$ npm install file-store-lib

and then from your Angular AppModule:

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

// Import firebase
import * as firebase from 'firebase';

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

// Import the library
import { FileUploadModule } from 'file-store-lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the library as an import
    FileUploadModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor() {
    // Setup the Firebase initialization, with appropriate firebase config of your project
    const firebaseConfig = {
      apiKey: 'AIzaSyXxXxYyYyXxXxYyYyXxYyXgt9vmTf123456',
      authDomain: 'your-angular-app.firebaseapp.com',
      databaseURL: 'https://your-angular-app.firebaseio.com',
      projectId: 'your-angular-app',
      storageBucket: 'your-angular-app.appspot.com',
      messagingSenderId: '012345678901'
    };

    firebase.initializeApp(firebaseConfig);
  }
}

Once file-store-lib is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use file-store-lib component in app.component.html -->
<md-card>
  <md-card-title>
    {{title}}
  </md-card-title>
  <md-card-content>
    <mlc-file-upload [config]="fileStoreConfig" (onUpload)="captureFileData($event)"></mlc-file-upload>
</md-card-content>
</md-card>

API

FileStoreConfig interface

{
    path: string;
    placeholder?: string;
    accept?: string;
    uploadButtonName?: string;
    cacheMaxAge?: number;
}

FileStoreConfig object holds the path string property which defines the path where the file content to be uploaded in Firebase Storage.

placeholder is an optional string to represent the placeholder on the input element. Default is 'Select a file'.

accept is an optional string which holds the filter to be applied while selecting the file. Refer to W3C standards for valid string values.

uploadButtonName is an optional string to hold the name of the button which triggers the upload action. Default is 'UPLOAD'.

cacheMaxAge (value to be specified in seconds) if not specified is set for 1 year (60 60 24 * 365) by default, to set the file metadata of CacheControl.

onUpload() onUpload() event is triggered once the File Upload task is completed successfully. The triggered event returns the FileStoreRecord object.

FileStoreRecord

{
    type: string;
    name: string;
    downloadURL: URL;
    createdOn: Date;
    md5Hash: string;
}

Uploading multiple files with Drag & Drop feature

Use the <mlc-file-dnd> element to get the Drag & Drop feature, in place of <mlc-file-upload> element.

<!-- Use file-store-lib component in app.component.html -->
<md-card>
  <md-card-title>
    {{title}}
  </md-card-title>
  <md-card-content>
    <mlc-file-dnd [config]="fileStoreConfig" (onUpload)="captureFileRecords($event)"></mlc-file-dnd>
</md-card-content>
</md-card>

onUpload($event) - would return an array of FileStoreRecords.

FileStoreConfig.accept has no effect on this element, and the user would be free to drag and drop any type of file for upload.