diff --git a/docs/storage/storage.md b/docs/storage/storage.md index 43b6c5a0b..3c94c1928 100644 --- a/docs/storage/storage.md +++ b/docs/storage/storage.md @@ -186,6 +186,16 @@ export class AppComponent { ### Downloading Files +A convenient pipe exists for simple in page references. + +```ts +@Component({ + selector: 'app-root', + template: `` +}) +export class AppComponent {} +``` + To download a file you'll need to create a reference and call the `getDownloadURL()` method on an `AngularFireStorageReference`. ```ts diff --git a/src/storage/pipes/storageUrl.pipe.ts b/src/storage/pipes/storageUrl.pipe.ts new file mode 100644 index 000000000..d64c8b984 --- /dev/null +++ b/src/storage/pipes/storageUrl.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe } from '@angular/core'; +import { AngularFireStorage } from '../storage'; + +/** to be used with in combination with | async */ +@Pipe({ + name: 'ngfbStorageUrl' +}) export class AngularFirestoreStorageUrl implements PipeTransform { + constructor(public storage: AngularFireStorage) {} + + transform(path) { + return this.storage.ref(path).getDownloadURL(); + } +} diff --git a/src/storage/storage.module.ts b/src/storage/storage.module.ts index 4169db29f..829a1d907 100644 --- a/src/storage/storage.module.ts +++ b/src/storage/storage.module.ts @@ -1,7 +1,9 @@ import { NgModule } from '@angular/core'; import { AngularFireStorage } from './storage'; +import { AngularFirestoreStorageUrl } from './pipes/storageUrl.pipe'; @NgModule({ + declarations: [ AngularFirestoreStorageUrl ], providers: [ AngularFireStorage ] }) export class AngularFireStorageModule { } diff --git a/src/storage/storage.spec.ts b/src/storage/storage.spec.ts index 083d4b645..df76a5823 100644 --- a/src/storage/storage.spec.ts +++ b/src/storage/storage.spec.ts @@ -6,6 +6,7 @@ import { AngularFireStorage, AngularFireStorageModule, AngularFireUploadTask, BU import { COMMON_CONFIG } from '../test-config'; import 'firebase/storage'; import { rando } from '../firestore/utils.spec'; +import { AngularFirestoreStorageUrl } from './pipes/storageUrl.pipe'; describe('AngularFireStorage', () => { let app: FirebaseApp; @@ -135,6 +136,29 @@ describe('AngularFireStorage', () => { } + describe('pipes', () => { + it('ngfbStorageUrl should download a url', (done) => { + const data = { angular: 'fire' }; + const blob = new Blob([JSON.stringify(data)], { type : 'application/json' }); + const ref = afStorage.ref('af.json'); + const task = ref.put(blob); + const ngfbStorageUrl = new AngularFirestoreStorageUrl( afStorage ); + + // Wait for the upload + task.then(() => { + ngfbStorageUrl.transform('af.json') + .subscribe( + url => { + expect(url).toBeDefined(); + done(); + }, + done.fail + ); + }) + .catch( done.fail ); + }); + }); + }); describe('AngularFireStorage w/options', () => {