storage.md

AngularFireStorage

Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos.

NOTE: AngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. See the v7 upgrade guide for more information on this change..

Import the NgModule

Cloud Storage for AngularFire is contained in the @angular/fire/storage module namespace. Import the AngularFireStorageModule in your NgModule. This sets up the AngularFireStorage service for dependency injection.

import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';import{AngularFireModule}from'@angular/fire/compat';import{AngularFireStorageModule}from'@angular/fire/compat/storage';import{environment}from'../environments/environment'; @NgModule({imports: [BrowserModule,AngularFireModule.initializeApp(environment.firebase),AngularFireStorageModule],declarations: [AppComponent],bootstrap: [AppComponent]})exportclassAppModule{}

The BUCKET injection token can be used to customise the storage bucket.

import{AngularFireStorageModule,BUCKET}from'@angular/fire/compat/storage'; @NgModule({providers: [{provide: BUCKET,useValue: 'my-bucket-name'}], ... })exportclassAppModule{}

Injecting the AngularFireStorage service

Once the AngularFireStorageModule is registered you can inject the AngularFireStorage service.

import{Component}from'@angular/core';import{AngularFireStorage}from'@angular/fire/compat/storage'; @Component({selector: 'app-component',template: ``})exportclassAppComponent{constructor(privatestorage: AngularFireStorage){}}

Uploading blobs

There are three options for uploading files.

method
put(data: Blob, metadata?: storage.UploadMetadata): AngularFireUploadTask	Starts the upload of the blob to the storage reference's path. Returns an AngularFireUploadTask for upload monitoring.
putString(data: string, format?: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask	Updates an existing item in the array. Accepts a key, database reference, or an unwrapped snapshot.
upload(path: string, data: StringFormat, metadata?: UploadMetadata): AngularFireUploadTask	Upload or update a new file to the storage reference's path. Returns an AngularFireUploadTask for upload monitoring.

Examples

Uploading blobs with put

import{Component}from'@angular/core';import{AngularFireStorage}from'@angular/fire/compat/storage'; @Component({selector: 'app-root',template: ` <input type="file" (change)="uploadFile($event)"> `})exportclassAppComponent{constructor(privatestorage: AngularFireStorage){}uploadFile(event){constfile=event.target.files[0];constfilePath='name-your-file-path-here';constref=this.storage.ref(filePath);consttask=ref.put(file);}}

Uploading blobs with putString

import{Component}from'@angular/core';import{AngularFireStorage}from'@angular/fire/compat/storage'; @Component({selector: 'app-root',template: ` <input type="file" (change)="uploadFile($event)"> `})exportclassAppComponent{constructor(privatestorage: AngularFireStorage){}uploadFile(event){constfile=event.target.files[0];constfilePath='name-your-file-path-here';constref=this.storage.ref(filePath);consttask=ref.putString(file);}}

Uploading files with upload

import{Component}from'@angular/core';import{AngularFireStorage}from'@angular/fire/compat/storage'; @Component({selector: 'app-root',template: ` <input type="file" (change)="uploadFile($event)"> `})exportclassAppComponent{constructor(privatestorage: AngularFireStorage){}uploadFile(event){constfile=event.target.files[0];constfilePath='name-your-file-path-here';consttask=this.storage.upload(filePath,file);}}

Monitoring upload percentage

An AngularFireUploadTask has methods for observing upload percentage as well as the final download URL.

method
snapshotChanges(): Observable<FirebaseStorage.UploadTaskSnapshot>	Emits the raw UploadTaskSnapshot as the file upload progresses.
percentageChanges(): Observable<number>	Emits the upload completion percentage.
getDownloadURL(): Observable<any>	Emits the download url when available

Example Usage

The method getDownloadURL() doesn't rely on the task anymore, hence, in order to get the url we should use the finalize method from RxJS on top of the storage ref.

import{finalize}from'rxjs/operators'; @Component({selector: 'app-root',template: ` <input type="file" (change)="uploadFile($event)" /> <div>{{ uploadPercent | async }}</div> <a [href]="downloadURL | async">{{ downloadURL | async }}</a> `})exportclassAppComponent{uploadPercent: Observable<number>;downloadURL: Observable<string>;constructor(privatestorage: AngularFireStorage){}uploadFile(event){constfile=event.target.files[0];constfilePath='name-your-file-path-here';constfileRef=this.storage.ref(filePath);consttask=this.storage.upload(filePath,file);// observe percentage changesthis.uploadPercent=task.percentageChanges();// get notified when the download URL is availabletask.snapshotChanges().pipe(finalize(()=>this.downloadURL=fileRef.getDownloadURL())).subscribe()}}

Downloading Files

A convenient pipe exists for simple in page references.

@Component({selector: 'app-root',template: `<img [src]="'users/davideast.jpg' | getDownloadURL" />`})exportclassAppComponent{}

To download a file you'll need to create a reference and call the getDownloadURL() method on an AngularFireStorageReference.

@Component({selector: 'app-root',template: `<img [src]="profileUrl | async" />`})exportclassAppComponent{profileUrl: Observable<string|null>;constructor(privatestorage: AngularFireStorage){constref=this.storage.ref('users/davideast.jpg');this.profileUrl=ref.getDownloadURL();}}

Managing Metadata

Cloud Storage for Firebase allows you to upload and download metadata associated with files. This is useful because you can store important metadata and download it without needing to download the entire file.

Examples

Downloading metadata

@Component({selector: 'app-root',template: `<pre><code>{{ meta | async }}</code></pre>`})exportclassAppComponent{meta: Observable<any>;constructor(privatestorage: AngularFireStorage){constref=this.storage.ref('users/davideast.jpg');this.meta=ref.getMetadata();}}

Uploading metadata with files

@Component({selector: 'app-root',template: ` <input type="file" (change)="uploadFile($event)" /> `})exportclassAppComponent{constructor(privatestorage: AngularFireStorage){}uploadFile(event){constfile=event.target.files[0];constfilePath='name-your-file-path-here';constref=this.storage.ref(filePath);consttask=ref.put(file,{customMetadata: {blah: 'blah'}});}}