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.
/**
* 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;/**
* 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>;/**
* 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>;/**
* 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>;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;
}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);
}
}
}