From 6d0ea2135d938841920774fc5c6470e968052020 Mon Sep 17 00:00:00 2001 From: Renan Sigolo Date: Tue, 15 May 2018 23:57:35 +1000 Subject: [PATCH 1/2] docs(changelog): update storage documentation --- docs/storage/storage.md | 72 ++++++++++++++++++++++++++++++++++------- 1 file changed, 61 insertions(+), 11 deletions(-) diff --git a/docs/storage/storage.md b/docs/storage/storage.md index 5bedaeb24..ab43213eb 100644 --- a/docs/storage/storage.md +++ b/docs/storage/storage.md @@ -45,13 +45,62 @@ export class AppComponent { ### Uploading blobs -There are two options for uploading files. +There are three options for uploading files. -| method | | -| ---------|--------------------| -| `put(data: Blob, metadata?: storage.UploadMetadata): AngularFireUploadTask` | Starts the upload of the blob to the storage reference's path. Returns an `AngularFireUploadTask` for upload monitoring. | +| method | | +| ---------|--------------------| +| `put(data: Blob, metadata?: storage.UploadMetadata): AngularFireUploadTask` | Starts the upload of the blob to the storage reference's path. Returns an `AngularFireUploadTask` for upload monitoring. | | `putString(data: string, format?: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask` | Updates an existing item in the array. Accepts a key, database reference, or an unwrapped snapshot. | +| `upload(path: string, data: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask` | Upload or update a new file to the storage reference's path. Returns an `AngularFireUploadTask` for upload monitoring. | + +#### Uploading blobs with put + +```ts +import { Component } from '@angular/core'; +import { AngularFireStorage } from 'angularfire2/storage'; + +@Component({ + selector: 'app-root', + template: ` + + ` +}) +export class AppComponent { + constructor(private storage: AngularFireStorage) { } + uploadFile(event) { + const file = event.target.files[0]; + const filePath = 'name-your-file-path-here'; + const ref = this.storage.ref(filePath); + const task = ref.put(file); + } +} +``` + +#### Uploading blobs with putString + +```ts +import { Component } from '@angular/core'; +import { AngularFireStorage } from 'angularfire2/storage'; + +@Component({ + selector: 'app-root', + template: ` + + ` +}) +export class AppComponent { + constructor(private storage: AngularFireStorage) { } + uploadFile(event) { + const file = event.target.files[0]; + const filePath = 'name-your-file-path-here'; + const ref = this.storage.ref(filePath); + const task = ref.putString(file); + } +} +``` + +#### Uploading files with upload ```ts import { Component } from '@angular/core'; @@ -77,11 +126,11 @@ export class AppComponent { An `AngularFireUploadTask` has methods for observing upload percentage as well as the final download URL. -| method | | -| ---------|--------------------| -| `snapshotChanges(): Observable` | Emits the raw `UploadTaskSnapshot` as the file upload progresses. | -| `percentageChanges(): Observable` | Emits the upload completion percentage. | -| `downloadURL(): Observable` | Emits the download url when available | +| method | | +| ---------|--------------------| +| `snapshotChanges(): Observable` | Emits the raw `UploadTaskSnapshot` as the file upload progresses. | +| `percentageChanges(): Observable` | Emits the upload completion percentage. | +| `getDownloadURL(): Observable` | Emits the download url when available | #### Example Usage @@ -101,12 +150,13 @@ export class AppComponent { uploadFile(event) { const file = event.target.files[0]; const filePath = 'name-your-file-path-here'; + const fileRef = this.storage.ref(filePath); const task = this.storage.upload(filePath, file); - + // observe percentage changes this.uploadPercent = task.percentageChanges(); // get notified when the download URL is available - this.downloadURL = task.downloadURL(); + this.downloadURL = fileRef.getDownloadURL(); } } ``` From 63c2a7130a86c2b730da511b8d8ffb69f8602941 Mon Sep 17 00:00:00 2001 From: Renan Sigolo Date: Thu, 17 May 2018 03:22:22 +1000 Subject: [PATCH 2/2] Update storage.md --- docs/storage/storage.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/storage/storage.md b/docs/storage/storage.md index ab43213eb..38a8cdfe1 100644 --- a/docs/storage/storage.md +++ b/docs/storage/storage.md @@ -130,11 +130,15 @@ An `AngularFireUploadTask` has methods for observing upload percentage as well a | ---------|--------------------| | `snapshotChanges(): Observable` | Emits the raw `UploadTaskSnapshot` as the file upload progresses. | | `percentageChanges(): Observable` | Emits the upload completion percentage. | -| `getDownloadURL(): Observable` | Emits the download url when available | +| `getDownloadURL(): Observable` | Emits the download url when available | #### Example Usage +The method `getDownloadURL()` doesn't rely on the task anymore, hence, in order to get the url we should use the finalize method from RxJS on top of the storage ref. + ```ts +import { finalize } from 'rxjs/operators'; + @Component({ selector: 'app-root', template: ` @@ -156,7 +160,10 @@ export class AppComponent { // observe percentage changes this.uploadPercent = task.percentageChanges(); // get notified when the download URL is available - this.downloadURL = fileRef.getDownloadURL(); + task.snapshotChanges().pipe( + finalize(() => this.downloadURL = fileRef.getDownloadURL() ) + ) + .subscribe() } } ```