diff --git a/packages/rxfire/docs/storage.md b/packages/rxfire/docs/storage.md new file mode 100644 index 00000000000..0f99640ca27 --- /dev/null +++ b/packages/rxfire/docs/storage.md @@ -0,0 +1,172 @@ +# RxFire Storage + +## Task Observables + +### `fromTask()` +The `fromTask()` function creates an observable that emits progress changes. + +| | | +|-----------------|--------------------------------------------| +| **function** | `fromTask()` | +| **params** | `storage.UploadTask` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { fromTask } from 'rxfire/firestore'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); +const davidRef = storage.ref('users/david.png'); + +// Upload a transparent 1x1 pixel image +const task = davidRef.putString('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 'base64'); + +fromTask(task) + .subscribe(snap => { console.log(snap.bytesTransferred); }); +``` + +### `percentage()` +The `percentage()` function creates an observable that emits percentage of the uploaded bytes. + +| | | +|-----------------|--------------------------------------------| +| **function** | `fromTask()` | +| **params** | `storage.UploadTask` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { percentage } from 'rxfire/firestore'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); +const davidRef = storage.ref('users/david.png'); + +// Upload a transparent 1x1 pixel image +const task = davidRef.putString('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 'base64'); + +percentage(task) + .subscribe(uploadProgress => { console.log(uploadProgress); }); +``` + +## Reference Observables + +### `getDownloadURL()` +The `getDownloadURL()` function creates an observable that emits the URL of the file. + +| | | +|-----------------|------------------------------------------| +| **function** | `getDownloadURL()` | +| **params** | `storage.Reference` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { getDownloadURL } from 'rxfire/storage'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); + +// Assume this exists +const davidRef = storage.ref('users/david.png'); + +getDownloadURL(davidRef) + .subscribe(url => { console.log(url) }); +``` + +### `getMetadata()` +The `getMetadata()` function creates an observable that emits the URL of the file's metadta. + +| | | +|-----------------|------------------------------------------| +| **function** | `getMetadata()` | +| **params** | `storage.Reference` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { getMetadata } from 'rxfire/storage'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); + +// Assume this exists +const davidRef = storage.ref('users/david.png'); + +getMetadata(davidRef) + .subscribe(meta => { console.log(meta) }); +``` + +### `put()` +The `put()` function creates an observable that emits the upload progress of a file. + +| | | +|-----------------|------------------------------------------| +| **function** | `put()` | +| **params** | ref: `storage.Reference`, data: `any`, metadata?: `storage.UploadMetadata` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { put } from 'rxfire/storage'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); +const dataRef = storage.ref('users/david.json'); + +const blob = new Blob( + [JSON.stringify({ name: 'david'}, null, 2)], + { type : 'application/json' } +); + +put(davidRef, blob, { type : 'application/json' }) + .subscribe(snap => { console.log(snap.bytesTransferred) }); +``` + +### `putString()` +The `putString()` function creates an observable that emits the upload progress of a file. + +| | | +|-----------------|------------------------------------------| +| **function** | `putString()` | +| **params** | ref: `storage.Reference`, data: `string`, metadata?: `storage.UploadMetadata` | +| **import path** | `rxfire/storage` | +| **return** | `Observable` | + +#### TypeScript Example +```ts +import { putString } from 'rxfire/storage'; +import * as firebase from 'firebase'; +import 'firebase/storage'; + +// Set up Firebase +const app = initializeApp({ /* config */ }); +const storage = app.storage(); +const davidRef = storage.ref('users/david.png'); + +const base64 = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + +putString(davidRef, base64, { type : 'application/json' }) + .subscribe(snap => { console.log(snap.bytesTransferred) }); +``` diff --git a/packages/rxfire/firestore/collection/index.ts b/packages/rxfire/firestore/collection/index.ts index 817de03722b..ecc647ad66c 100644 --- a/packages/rxfire/firestore/collection/index.ts +++ b/packages/rxfire/firestore/collection/index.ts @@ -117,7 +117,7 @@ function processDocumentChanges( * order of occurence. * @param query */ -export function docChanges( +export function collectionChanges( query: firestore.Query, events: firestore.DocumentChangeType[] = ALL_EVENTS ) { @@ -144,7 +144,7 @@ export function sortedChanges( query: firestore.Query, events?: firestore.DocumentChangeType[] ) { - return docChanges(query, events).pipe( + return collectionChanges(query, events).pipe( scan( ( current: firestore.DocumentChange[], @@ -163,7 +163,7 @@ export function auditTrail( query: firestore.Query, events?: firestore.DocumentChangeType[] ): Observable { - return docChanges(query, events).pipe( + return collectionChanges(query, events).pipe( scan((current, action) => [...current, ...action], []) ); }