diff --git a/docs/storage/storage.md b/docs/storage/storage.md index 5bedaeb24..38a8cdfe1 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,15 +126,19 @@ 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 +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: ` @@ -101,12 +154,16 @@ 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(); + task.snapshotChanges().pipe( + finalize(() => this.downloadURL = fileRef.getDownloadURL() ) + ) + .subscribe() } } ```