[Angularfire] Angular File uploads to Firebase Storage with Angular control value accessor

The upload class is used in the service layer. Notice it has a constructorfilefor attribute, and which has a type ofFile. This would allows us to initialize new uploads with a JavaScript File object. You'll see what's important in the next step.

 
export class Upload {
  $key: string;
  file:File;
  name:string;
  url:string;
  progress:number;
  createdAt: Date = new Date();
  constructor(file:File) { this.file = file;
  }
}

Then build the upload service, which can inject to component:

import { Injectable } from ‘@angular/core‘;
import {Subject} from ‘rxjs/Subject‘;
import {MatSnackBar} from ‘@angular/material‘;

import * as firebase from ‘firebase‘;
import UploadTaskSnapshot = firebase.storage.UploadTaskSnapshot;
import {Upload} from ‘./upload‘;

@Injectable()
export class UploadService {

  uploading$ = new Subject<number>();
  completed$ = new Subject<Upload>();

  constructor(
    private snackBar: MatSnackBar
  ) {

  }

  uploadFile(upload: Upload, folder: string) { // Create a storage ref const storageRef = firebase.storage().ref();
    const uploadTask = storageRef.child(`${folder}/${upload.file.name}`).put(upload.file); // Upload file  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot: UploadTaskSnapshot) => {
        upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; this.uploading$.next(upload.progress);
      },
      (err) => { this.snackBar.open(err.message, ‘OK‘, {
          duration: 3000,
        });
      },
      () => {
        upload.url = uploadTask.snapshot.downloadURL;
        upload.name = upload.file.name; this.completed$.next(upload); this.uploading$.next(null);
      });
  }

  deleteUpload(name: string, folder: string) {
    const storageRef = firebase.storage().ref();
    storageRef.child(`${folder}/${name}`).delete(); this.completed$.next();
  }
}

Component:

import {ChangeDetectionStrategy, Component, forwardRef, Input} from ‘@angular/core‘;
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from ‘@angular/forms‘;

import {UploadService} from ‘../../services/upload.service‘;
import {Upload} from ‘../../services/upload‘;
import {Observable} from ‘rxjs/Observable‘;

export const TYPE_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  multi: true,
  useExisting: forwardRef(() => ImageUploaderComponent)
};

@Component({
  selector: ‘image-uploader‘,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [TYPE_CONTROL_ACCESSOR],
  templateUrl: ‘./image-uploader.component.html‘,
  styleUrls: [‘./image-uploader.component.scss‘]
})
export class ImageUploaderComponent implements ControlValueAccessor {

  @Input() img;

  private onTouch: Function;
  private onModelChange: Function;
  private value: string;

  file: Upload;
  currentUpload: Upload;
  progress$: Observable<number>;

  constructor(private uploadService: UploadService) { this.progress$ = this.uploadService.uploading$; this.uploadService.completed$.subscribe((upload) => { if (upload) { this.setSelected(upload.url); this.currentUpload = upload;
      } else { this.setSelected(‘‘); this.currentUpload = null;
      }
    });
  }

  onChange($event) {
    const file = $event.target.files[0]; this.file = new Upload(file); this.uploadService.uploadFile(this.file, ‘icons‘);
  }

  writeValue(value: any): void { this.value = value;
  }

  registerOnChange(fn: Function): void { this.onModelChange = fn;
  }

  registerOnTouched(fn: Function): void { this.onTouch = fn;
  }

  setSelected(value: string): void { this.value = value; this.onModelChange(value); this.onTouch();
  }

  clear() { if (this.file) { this.uploadService.deleteUpload(this.file.name, ‘icons‘); this.setSelected(‘‘);
    }
  }
}

Template:

 
<div *ngIf="progress$ | async as p">
      <mat-progress-bar mode="determinate" [value]="p"></mat-progress-bar>
    </div>
    <mat-card-subtitle>
      Select / upload icon
    </mat-card-subtitle>

    <mat-card-content fxLayout="column">
      <div fxLayout="row" fxLayoutAlign="space-around">
        <div
          *ngIf="currentUpload"
          class="image-container"
          fxFlex="30%">
          <img [src]="currentUpload?.url || ‘‘" [alt]="currentUpload?.name || ‘‘">
        </div>
      </div>

[Angularfire] Angular File uploads to Firebase Storage with Angular control value accessor