storage.md

AngularFire ❱ Developer Guide ❱ Cloud Storage

Cloud Storage

Cloud Storage allows developers to upload and share user generated content such as images, video and more. Data is stored in Google Cloud Storage.

Learn more

Dependency Injection

AngularFire allows you to work with Firebase Storage via Angular's Dependency Injection.

As a prerequisite, ensure that AngularFire has been added to your project via

ng add @angular/fire

Provide a Cloud Storage instance in the application's app.config.ts:

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideStorage, getStorage } from '@angular/fire/storage';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideStorage(() => getStorage()),
    ...
  ],
  ...
})

Next inject Storage into your component:

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

@Component({ ... })
export class StorageComponent {
  private storage = inject(Storage);
  ...
}

Firebase API

AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.

Update the imports from import { ... } from 'firebase/storage' to import { ... } from '@angular/fire/storage' and follow the official documentation.

Getting Started | API Reference

File Upload Example

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

@Component({
    selector: 'app-storage',
    template: `
        <h1>Storage</h1>
        <label for="fileUpload">Choose a File</label>
        <input id="fileUpload" type="file" #upload>
        <button (click)="uploadFile(upload)">Upload</button>
    `,
})
export class StorageComponent {
    private readonly storage: Storage = inject(Storage);

    uploadFile(input: HTMLInputElement) {
        if (!input.files) return

        const files: FileList = input.files;

        for (let i = 0; i < files.length; i++) {
            const file = files.item(i);
            if (file) {
                const storageRef = ref(this.storage, file.name);
                uploadBytesResumable(storageRef, file);
            }
        }
    }
}