import { Component , OnInit } from '@angular/core' ; import { AngularFireStorage , AngularFireUploadTask } from 'angularfire2/storage' ; import { AngularFirestore } from 'angularfire2/firestore' ; import { Observable } from 'rxjs/Observable' ; import { tap } from 'rxjs/operators' ; @ Component ( { selector : 'file-upload' , templateUrl : './file-upload.component.html' , styleUrls : [ './file-upload.component.scss' ] } ) export class FileUploadComponent { task : AngularFireUploadTask ; percentage : Observable < number > ; snapshot : Observable < any > ; downloadURL : Observable < string > ; isHovering : boolean ; constructor ( private storage , private db ) { } toggleHover ( event ) { this . isHovering = event ; } startUpload ( event ) { const file = event . item ( 0 ) ; if ( file . type . split ( '/' ) [ 0 ] !== 'image' ) { console . error ( 'unsupported file type :( ' ) ; return ; } const path = `test/${ new Date ( ) . getTime ( ) }_${ file . name }` ; const customMetadata = { app : 'My AngularFire-powered PWA!' } ; this . task = this . storage . upload ( path , file , { customMetadata } ) ; this . percentage = this . task . percentageChanges ( ) ; this . snapshot = this . task . snapshotChanges ( ) . pipe ( finalize ( ( ) => this . downloadURL = fileRef . getDownloadURL ( ) ) , tap ( snap => { console . log ( snap ) ; if ( snap . bytesTransferred === snap . totalBytes ) { this . db . collection ( 'photos' ) . add ( { path , size : snap . totalBytes } ) ; } } ) ) ; } isActive ( snapshot ) { return snapshot . state === 'running' && snapshot . bytesTransferred < snapshot . totalBytes ; } }