mat-firebase-upload

mat-firebase-upload

An easy to use upload dropzone.

• Angular 2+
• Material themed
• Firebase storage

Basic Example

Component HTML

<form-firebase-file 
  [formControl]="controlFile" 
  [config]="config"
>
</form-firebase-file>

Component Typescript

...
  controlFile = new FormControl();
  config = {
    directory: `path/to/upload/to`,
    firebaseConfig: environment.firebaseConfig,
  };
...

angular.json

"my-project": {
  ...,
  "architect": {
    "build": {
      ...,
      "options": {
        ...,
        "assets": [
          ...,
          {
            "glob": "**/*",
            "input": "node_modules/mat-firebase-upload/assets",
            "output": "./assets/fileicons"
          }

Advanced Options

Component HTML

<form-firebase-file 
  [formControl]="controlFile" 
  [config]="config"
  placeholder="Drop files here!"
>
</form-firebase-file>

Component Typescript

...
  controlFile = new FormControl();
  config: FormFirebaseFilesConfiguration = {
    directory: `audits/somelocation`,
    firebaseConfig: environment.firebaseConfig,

    bucketname: 'my-other-bucket-name.appspot.com',
    firebaseApp: app,
    imageCompressionQuality: 0.8,
    imageCompressionMaxSize: 2000,
    acceptedFiles: 'image/*',
    useUuidName: true,
    deleteOnStorage: true
  };
...

More details in the Type definitions!