feat(storage): Add Storage

Author: davideast

src/storage/interfaces.ts

@@ -1,10 +1,12 @@
-import firebase from 'firebase/app';
+// import firebase from 'firebase/app';
 
-export type UploadTask = firebase.storage.UploadTask;
-export type UploadTaskSnapshot = firebase.storage.UploadTaskSnapshot;
-export type UploadMetadata = firebase.storage.UploadMetadata;
+export type UploadTask = import('firebase/storage').UploadTask;
+export type UploadTaskSnapshot = import('firebase/storage').UploadTaskSnapshot;
+export type UploadMetadata = import('firebase/storage').UploadMetadata;
+export type UploadResult = import('firebase/storage').UploadResult;
 
-export type SettableMetadata = firebase.storage.SettableMetadata;
-export type Reference = firebase.storage.Reference;
-export type StringFormat = firebase.storage.StringFormat;
-export type ListResult = firebase.storage.ListResult;
+export type SettableMetadata = import('firebase/storage').SettableMetadata;
+export type StorageReference = import('firebase/storage').StorageReference;
+export type StringFormat = import('firebase/storage').StringFormat;
+export type ListResult = import('firebase/storage').ListResult;
+export type StorageService = import('firebase/storage').StorageService;

src/storage/observable/fromTask.ts

@@ -2,10 +2,6 @@ import { Observable } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { UploadTask, UploadTaskSnapshot } from '../interfaces';
 
-// need to import, else the types become import('firebase/app').default.storage.UploadTask
-// and it no longer works w/Firebase v7
-import firebase from 'firebase/app';
-
 // Things aren't working great, I'm having to put in a lot of work-arounds for what
 // appear to be Firebase JS SDK bugs https://github.com/firebase/firebase-js-sdk/issues/4158
 export function fromTask(task: UploadTask) {

src/storage/ref.ts

@@ -1,8 +1,25 @@
-import { ListResult, Reference, SettableMetadata, StringFormat, UploadMetadata } from './interfaces';
 import { AngularFireUploadTask, createUploadTask } from './task';
 import { from, Observable, of } from 'rxjs';
 import { ɵAngularFireSchedulers } from '@angular/fire';
 import { observeOn, switchMap } from 'rxjs/operators';
+import { ListResult,
+  StorageReference,
+  SettableMetadata,
+  StringFormat,
+  UploadMetadata,
+  UploadResult,
+  StorageService,
+} from './interfaces';
+import { 
+  getDownloadURL,
+  getMetadata,
+  ref,
+  deleteObject,
+  updateMetadata,
+  uploadBytesResumable as put,
+  uploadString as putString,
+  listAll,
+} from 'firebase/storage';
 
 export interface AngularFireStorageReference {
   getDownloadURL(): Observable<any>;
@@ -11,7 +28,9 @@ export interface AngularFireStorageReference {
   child(path: string): any;
   updateMetadata(meta: SettableMetadata): Observable<any>;
   put(data: any, metadata?: UploadMetadata | undefined): AngularFireUploadTask;
-  putString(data: string, format?: string | undefined, metadata?: UploadMetadata | undefined): AngularFireUploadTask;
+  // MARK: Breaking change
+  // previous: putString(data: string, format?: string | undefined, metadata?: UploadMetadata | undefined): AngularFireUploadTask;
+  putString(data: string, format?: string | undefined, metadata?: UploadMetadata | undefined): Observable<UploadResult>;
   listAll(): Observable<ListResult>;
 }
 
@@ -20,32 +39,35 @@ export interface AngularFireStorageReference {
  * creates observable methods from promise based methods.
  */
 export function createStorageRef(
-  ref: Reference,
+  storage: StorageService,
+  storageRef: StorageReference,
   schedulers: ɵAngularFireSchedulers,
   keepUnstableUntilFirst: <T>(obs$: Observable<T>) => Observable<T>
 ): AngularFireStorageReference {
   return {
     getDownloadURL: () => of(undefined).pipe(
       observeOn(schedulers.outsideAngular),
-      switchMap(() => ref.getDownloadURL()),
+      switchMap(() => getDownloadURL(storageRef)),
       keepUnstableUntilFirst
     ),
     getMetadata: () => of(undefined).pipe(
       observeOn(schedulers.outsideAngular),
-      switchMap(() => ref.getMetadata()),
+      switchMap(() => getMetadata(storageRef)),
       keepUnstableUntilFirst
     ),
-    delete: () => from(ref.delete()),
-    child: (path: string) => createStorageRef(ref.child(path), schedulers, keepUnstableUntilFirst),
-    updateMetadata: (meta: SettableMetadata) => from(ref.updateMetadata(meta)),
+    delete: () => from(deleteObject(storageRef)),
+    child: (path: string) => createStorageRef(storage, ref(storage, path), schedulers, keepUnstableUntilFirst),
+    updateMetadata: (meta: SettableMetadata) => from(updateMetadata(storageRef, meta)),
     put: (data: any, metadata?: UploadMetadata) => {
-      const task = ref.put(data, metadata);
+      const task = put(storageRef, data, metadata);
       return createUploadTask(task);
     },
-    putString: (data: string, format?: StringFormat, metadata?: UploadMetadata) => {
-      const task = ref.putString(data, format, metadata);
-      return createUploadTask(task);
+    // MARK: Breaking change
+    // previous: AngularFireStorageReference.putString(data: string, format?: string, metadata?: UploadMetadata): AngularFireUploadTask
+    putString: (data: string, format?: StringFormat, metadata?: UploadMetadata): Observable<UploadResult> => {
+      const task = putString(storageRef, data, format, metadata);
+      return from(task);
     },
-    listAll: () => from(ref.listAll())
+    listAll: () => from(listAll(storageRef))
   };
 }

src/storage/storage.spec.ts

@@ -6,8 +6,7 @@ import { AngularFireStorage, AngularFireStorageModule, AngularFireUploadTask, BU
 import { COMMON_CONFIG } from '../test-config';
 import { rando } from '../firestore/utils.spec';
 import { ChangeDetectorRef } from '@angular/core';
-import 'firebase/storage';
-import firebase from 'firebase/app';
+import { UploadTaskSnapshot, getMetadata } from 'firebase/storage';
 
 if (typeof XMLHttpRequest === 'undefined') {
   globalThis.XMLHttpRequest = require('xhr2');
@@ -66,7 +65,7 @@ describe('AngularFireStorage', () => {
       const ref = afStorage.ref(rando());
       const task = ref.put(blob);
       let emissionCount = 0;
-      let lastSnap: firebase.storage.UploadTaskSnapshot;
+      let lastSnap: UploadTaskSnapshot;
       task.snapshotChanges()
         .subscribe(
           snap => {
@@ -117,7 +116,7 @@ describe('AngularFireStorage', () => {
       const ref = afStorage.ref(rando());
       const task: AngularFireUploadTask = ref.put(blob);
       let emissionCount = 0;
-      let lastSnap: firebase.storage.UploadTaskSnapshot;
+      let lastSnap: UploadTaskSnapshot;
       task.snapshotChanges().subscribe(snap => {
         emissionCount++;
         lastSnap = snap;
@@ -156,7 +155,7 @@ describe('AngularFireStorage', () => {
       const ref = afStorage.storage.ref(rando());
       const task = ref.put(blob);
       let emissionCount = 0;
-      let lastSnap: firebase.storage.UploadTaskSnapshot;
+      let lastSnap: UploadTaskSnapshot;
       task.then(_snap => {
         fromTask(task).subscribe(
             snap => {
@@ -205,7 +204,7 @@ describe('AngularFireStorage', () => {
       forkJoin([task.snapshotChanges()])
         .pipe(
           // get the metadata download
-          mergeMap(() => ref.getMetadata()),
+          mergeMap(() => getMetadata(ref)),
           // assert the URL
           tap(meta => expect(meta.customMetadata).toEqual({ blah: 'blah' })),
           // Delete the file

src/storage/storage.ts

@@ -11,9 +11,8 @@ import {
   ɵfirebaseAppFactory,
   ɵkeepUnstableUntilFirstFactory
 } from '@angular/fire';
-import { UploadMetadata } from './interfaces';
-import 'firebase/storage';
-import firebase from 'firebase/app';
+import { UploadMetadata, StorageService } from './interfaces';
+import { getStorage, ref } from 'firebase/storage';
 
 export const BUCKET = new InjectionToken<string>('angularfire2.storageBucket');
 export const MAX_UPLOAD_RETRY_TIME = new InjectionToken<number>('angularfire2.storage.maxUploadRetryTime');
@@ -30,7 +29,7 @@ export const MAX_OPERATION_RETRY_TIME = new InjectionToken<number>('angularfire2
   providedIn: 'any'
 })
 export class AngularFireStorage {
-  public readonly storage: firebase.storage.Storage;
+  public readonly storage: StorageService;
 
   public readonly keepUnstableUntilFirst: <T>(obs: Observable<T>) => Observable<T>;
   public readonly schedulers: ɵAngularFireSchedulers;
@@ -50,29 +49,31 @@ export class AngularFireStorage {
     const app = ɵfirebaseAppFactory(options, zone, nameOrConfig);
 
     this.storage = ɵfetchInstance(`${app.name}.storage.${storageBucket}`, 'AngularFireStorage', app, () => {
-      const storage = zone.runOutsideAngular(() => app.storage(storageBucket || undefined));
+      const storage = zone.runOutsideAngular(() => {
+        return getStorage(app, storageBucket || undefined);
+      });
       if (maxUploadRetryTime) {
-        storage.setMaxUploadRetryTime(maxUploadRetryTime);
+        storage.maxUploadRetryTime = maxUploadRetryTime;
       }
       if (maxOperationRetryTime) {
-        storage.setMaxOperationRetryTime(maxOperationRetryTime);
+        storage.maxOperationRetryTime = maxOperationRetryTime;
       }
       return storage;
     }, [maxUploadRetryTime, maxOperationRetryTime]);
   }
 
   ref(path: string) {
-    return createStorageRef(this.storage.ref(path), this.schedulers, this.keepUnstableUntilFirst);
+    return createStorageRef(this.storage, ref(this.storage, path), this.schedulers, this.keepUnstableUntilFirst);
   }
 
   refFromURL(path: string) {
-    return createStorageRef(this.storage.refFromURL(path), this.schedulers, this.keepUnstableUntilFirst);
+    return createStorageRef(this.storage, ref(this.storage, path), this.schedulers, this.keepUnstableUntilFirst);
   }
 
   upload(path: string, data: any, metadata?: UploadMetadata) {
-    const storageRef = this.storage.ref(path);
-    const ref = createStorageRef(storageRef, this.schedulers, this.keepUnstableUntilFirst);
-    return ref.put(data, metadata);
+    const storageRef = ref(this.storage, path);
+    const afRef = createStorageRef(this.storage, storageRef, this.schedulers, this.keepUnstableUntilFirst);
+    return afRef.put(data, metadata);
   }
 
 }