Edited at

AngularFireがStorageにも対応してたので使ってみた

More than 1 year has passed since last update.

以前、AngularでCloud Storage for Firebaseにファイルアップロードという記事でPure JavaScriptのSDKを使いAngularからFirebase Cloud Storageを使ってみましたが、AngularFireにもStorageを扱う機能が追加されたようなので、そちらを使ってみたいと思います。(5.0.0-rc.6で使えるみたい)

公式ドキュメント: AngularFireStorage


前提


サンプル実装

AngularFireのインストールと、新しく追加されたAPIを使うところから始めていきます。


AngularFireのインストールとセットアップ

今回はangularfire2の方を使います。

※ firebaseも必要なので、同時にインストールします。

$ npm install firebase angularfire2 --save

今回(2018/05/04現在)インストールされたバージョンは以下のとおりです。

src/environments/environment.tsを開き、「Firebaseの設定」で取得した設定情報を次のように設定しておきます。


environment.ts

export const environment = {

production: false,
firebase: {
apiKey: '<your-key>',
authDomain: '<your-project-authdomain>',
databaseURL: '<your-database-URL>',
projectId: '<your-project-id>',
messagingSenderId: '<your-messaging-sender-id>'
}
};

次に、src/app/app.module.tsを開き、次のコメントに示した箇所を変更します。


src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2'; // 追加でインポート
import { AngularFireStorageModule } from 'angularfire2/storage'; // 追加でインポート

import { AppComponent } from './app.component';
import { FileUploadComponent } from './file-upload/file-upload.component'; // 今回追加したファイルアップロードをするコンポーネント
import { environment } from '../environments/environment'; // environmentをインポートしておく

@NgModule({
declarations: [
AppComponent,
FileUploadComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase), // importsに追加
AngularFireStorageModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}



ファイルアップロードの実装

使用するコンポーネントにインポートして、コンストラクタにセットしておきます。


file-upload.component.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireStorage } from 'angularfire2/storage';
...

constructor(private storage: AngularFireStorage) {}

...


コンポーネントのHTMLテンプレート側です。

inputのchangeイベントにonChangeInput()メソッドをバインドして、ファイル選択がされた際は、即時アップロード処理が呼ばれるようにしています。


file-upload.component.html

<h1>ファイルアップロード🐶</h1>

<!-- テキストファイルを選択するinput -->
<div id="input-area">
<input type="file" accept="image/*" (change)="onChangeInput($event)">
</div>

<!-- アップロードしたファイルを表示するエリア -->
<img [src]="uploadResult?.downloadURL || ''">


次に、コンポーネントのクラス側です。


file-upload.component.ts

import { Component } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
// ファイルのURL
public uploadFileUrl$: Observable<string>;

constructor(private storage: AngularFireStorage) {}

onChangeInput(evt) {
const file: File = evt.target.files[0];

// ファイル名を取得
const fileName = file.name;

// 保存先,ファイル名を指定
const filePath = 'upload_files/' + fileName;

// uploadメソッドでファイルをアップロード
const task = this.storage.upload(filePath, file);

// アップロード完了後にダウンロードURLを取得
this.uploadFileUrl$ = task.downloadURL();
}
}


ダウンロードURLをObservableで受け取れるのはかなり便利ですね。


その他

それにしても、AngularFireはいつまでRCなのか...