or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai.mdanalytics.mdapp-check.mdauth-guard.mdauthentication.mddata-connect.mddatabase.mdfirebase-app.mdfirestore.mdfunctions.mdindex.mdmessaging.mdperformance.mdremote-config.mdstorage.mdvertexai.md
tile.json

storage.mddocs/

Cloud Storage

Firebase Cloud Storage provides secure file uploads and downloads for user-generated content like images, videos, and other files. It offers automatic security, scalability, and integration with Firebase Auth.

Capabilities

Standalone Provider

/**
 * Provides Firebase Cloud Storage instance using standalone API
 * @param fn - Function that returns initialized Storage instance
 * @returns Environment providers for dependency injection
 */
export function provideStorage(fn: () => Storage): EnvironmentProviders;

/**
 * Get Firebase Cloud Storage instance
 * @param app - Optional Firebase app instance
 * @returns Firebase Cloud Storage instance
 */
export function getStorage(app?: FirebaseApp): Storage;

Angular Services

/**
 * Injectable service providing access to Firebase Cloud Storage instance
 */
export class Storage extends Storage {}

/**
 * Collection of all Firebase Cloud Storage instances
 */
export class StorageInstances extends Array<Storage> {}

/**
 * Observable stream of Firebase Cloud Storage instances
 */
export const storageInstance$: Observable<Storage>;

Storage Operations

/**
 * Get storage reference for a path
 * @param storage - Storage instance
 * @param path - Optional path to file/folder
 * @returns Storage reference
 */
export function ref(storage: Storage, path?: string): StorageReference;

/**
 * Upload bytes to storage
 * @param ref - Storage reference
 * @param data - File data (Blob or Uint8Array)
 * @param metadata - Optional file metadata
 * @returns Promise resolving to upload result
 */
export function uploadBytes(
  ref: StorageReference,
  data: Blob | Uint8Array,
  metadata?: UploadMetadata
): Promise<UploadResult>;

/**
 * Upload with progress tracking
 * @param ref - Storage reference
 * @param data - File data
 * @param metadata - Optional file metadata
 * @returns Upload task for progress monitoring
 */
export function uploadBytesResumable(
  ref: StorageReference,
  data: Blob | Uint8Array,
  metadata?: UploadMetadata
): UploadTask;

/**
 * Upload string data
 * @param ref - Storage reference
 * @param value - String data to upload
 * @param format - String format (base64, base64url, data_url)
 * @param metadata - Optional file metadata
 * @returns Promise resolving to upload result
 */
export function uploadString(
  ref: StorageReference,
  value: string,
  format?: StringFormat,
  metadata?: UploadMetadata
): Promise<UploadResult>;

/**
 * Get download URL for file
 * @param ref - Storage reference
 * @returns Promise resolving to download URL
 */
export function getDownloadURL(ref: StorageReference): Promise<string>;

/**
 * Delete file from storage
 * @param ref - Storage reference
 * @returns Promise that resolves when file is deleted
 */
export function deleteObject(ref: StorageReference): Promise<void>;

/**
 * Get file metadata
 * @param ref - Storage reference
 * @returns Promise resolving to file metadata
 */
export function getMetadata(ref: StorageReference): Promise<FullMetadata>;

/**
 * Update file metadata
 * @param ref - Storage reference
 * @param metadata - Metadata to update
 * @returns Promise resolving to updated metadata
 */
export function updateMetadata(
  ref: StorageReference,
  metadata: SettableMetadata
): Promise<FullMetadata>;

/**
 * List all files and folders
 * @param ref - Storage reference
 * @param options - Optional listing options
 * @returns Promise resolving to list result
 */
export function listAll(ref: StorageReference): Promise<ListResult>;

/**
 * List files with pagination
 * @param ref - Storage reference
 * @param options - Listing options with pagination
 * @returns Promise resolving to list result
 */
export function list(
  ref: StorageReference,
  options?: ListOptions
): Promise<ListResult>;

RxFire Observables

/**
 * Observable of upload progress percentage
 * @param task - Upload task
 * @returns Observable stream of progress percentage (0-100)
 */
export function percentage(task: UploadTask): Observable<number>;

/**
 * Observable of download URL
 * @param ref - Storage reference
 * @returns Observable stream of download URL
 */
export function getDownloadURL(ref: StorageReference): Observable<string>;

Types

interface Storage {
  readonly app: FirebaseApp;
  readonly maxOperationRetryTime: number;
  readonly maxUploadRetryTime: number;
}

interface StorageReference {
  readonly bucket: string;
  readonly fullPath: string;
  readonly name: string;
  readonly parent: StorageReference | null;
  readonly root: StorageReference;
  readonly storage: Storage;
}

interface UploadTask {
  readonly snapshot: UploadTaskSnapshot;
  cancel(): boolean;
  pause(): boolean;
  resume(): boolean;
  then<U>(
    onFulfilled?: (value: UploadTaskSnapshot) => U,
    onRejected?: (error: FirebaseStorageError) => U
  ): Promise<U>;
  catch(onRejected: (error: FirebaseStorageError) => any): Promise<any>;
  on(
    event: TaskEvent,
    nextOrObserver?: StorageObserver | null,
    error?: ErrorFn | null,
    complete?: CompleteFn | null
  ): Unsubscribe;
}

interface UploadMetadata {
  cacheControl?: string;
  contentDisposition?: string;
  contentEncoding?: string;
  contentLanguage?: string;
  contentType?: string;
  customMetadata?: { [key: string]: string };
}

interface FullMetadata extends UploadMetadata {
  bucket: string;
  fullPath: string;
  generation: string;
  metageneration: string;
  name: string;
  size: number;
  timeCreated: string;
  updated: string;
  md5Hash?: string;
  downloadTokens?: string;
  ref?: StorageReference;
}

Usage Examples

File Upload with Progress

import { Component, inject } from '@angular/core';
import { Storage, ref, uploadBytesResumable, getDownloadURL, percentage } from '@angular/fire/storage';

@Component({
  selector: 'app-file-upload',
  template: `
    <input type="file" (change)="onFileSelected($event)">
    <div *ngIf="uploadProgress$ | async as progress">
      Upload Progress: {{ progress }}%
    </div>
    <div *ngIf="downloadURL">
      <a [href]="downloadURL" target="_blank">Download File</a>
    </div>
  `,
})
export class FileUploadComponent {
  private storage = inject(Storage);
  uploadProgress$?: Observable<number>;
  downloadURL?: string;

  onFileSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      this.uploadFile(file);
    }
  }

  async uploadFile(file: File) {
    const filePath = `uploads/${Date.now()}_${file.name}`;
    const fileRef = ref(this.storage, filePath);
    const uploadTask = uploadBytesResumable(fileRef, file);

    // Monitor upload progress
    this.uploadProgress$ = percentage(uploadTask);

    try {
      await uploadTask;
      this.downloadURL = await getDownloadURL(fileRef);
      console.log('File uploaded successfully');
    } catch (error) {
      console.error('Upload error:', error);
    }
  }
}