storage.md

RxFire Storage

Task Observables

fromTask()

The fromTask() function creates an observable that emits progress changes.

function	fromTask()
params	import('firebase/storage').UploadTask
import path	rxfire/storage
return	Observable<firestore.UploadTaskSnapshot>

TypeScript Example

import { fromTask } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref, uploadString } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);
const davidRef = ref(storage, 'users/david.png');

// Upload a transparent 1x1 pixel image
const BASE_64_PIXEL = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const task = uploadString(davidRef, BASE_64_PIXEL, 'base64');

fromTask(task).subscribe((snap) => {
  console.log(snap.bytesTransferred);
});

percentage()

The percentage() function creates an observable that emits percentage of the uploaded bytes.

function	percentage()
params	import('firebase/storage').UploadTask
import path	rxfire/storage
return	Observable<number>

TypeScript Example

import { percentage } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref, uploadString } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);
const davidRef = ref(storage, 'users/david.png');

// Upload a transparent 1x1 pixel image
const BASE_64_PIXEL = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
const task = uploadString(davidRef, BASE_64_PIXEL, 'base64');

percentage(task).subscribe((action) => {
  console.log(action.progress, action.snapshot);
});

Reference Observables

getDownloadURL()

The getDownloadURL() function creates an observable that emits the URL of the file.

function	getDownloadURL()
params	import('firebase/storage').StorageReference
import path	rxfire/storage
return	Observable<string>

TypeScript Example

import { getDownloadURL } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);

// Assume this exists
const davidRef = ref(storage, 'users/david.png');

getDownloadURL(davidRef).subscribe((url) => {
  console.log(url);
});

getMetadata()

The getMetadata() function creates an observable that emits the full set of object metadata, including read-only properties.

function	getMetadata()
params	import('firebase/storage').StorageReference
import path	rxfire/storage
return	Observable<FullMetadata>

TypeScript Example

import { getMetadata } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);

// Assume this exists
const davidRef = ref(storage, 'users/david.png');

getMetadata(davidRef).subscribe((meta) => {
  console.log(meta);
});

uploadBytesResumable()

The uploadBytesResumable() function creates an observable that emits the upload progress of a file. Breaking change: Renamed from put() in previous API.

function	uploadBytesResumable()
params	ref: import('firebase/storage').StorageReference, data: any, metadata?: import('firebase/storage').UploadMetadata
import path	rxfire/storage
return	Observable<import('firebase/storage').UploadTaskSnapshot>

TypeScript Example

import { uploadBytesResumable } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);
const davidRef = ref(storage, 'users/david.json');

const blob = new Blob([JSON.stringify({ name: 'david' }, null, 2)], { type: 'application/json' });

uploadBytesResumable(davidRef, blob, { type: 'application/json' }).subscribe((snap) => {
  console.log(snap.bytesTransferred);
});

uploadString()

The uploadString() function creates an observable that emits the upload progress of a file. Breaking change: Renamed from putString() in previous API.

function	uploadString()
params	ref: import('firebase/storage').StorageReference, data: string, metadata?: import('firebase/storage').UploadMetadata
import path	rxfire/storage
return	Observable<import('firebase/storage').UploadTaskSnapshot>

TypeScript Example

import { uploadString } from 'rxfire/storage';
import { initializeApp } from 'firebase/app';
import { getStorage, ref } from 'firebase/storage';

// Set up Firebase
const app = initializeApp({/* config */});
const storage = getStorage(app);
const davidRef = ref('users/david.png');

const base64 = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

uploadString(davidRef, base64, { type: 'application/json' }).subscribe((snap) => {
  console.log(snap.bytesTransferred);
});