"o2-upload-to-fbs"  Angular2によるFirebase Storageへのアップロードツール

# __o2-upload-to-fbs__ Angular2によるFirebase Storageへのアップロードツール


__o2-upload-to-fbs__は、AngularFire2を利用して、Firebase Storageにファイルをアップロードするためのツールです。

__動画による解説__
<https://youtu.be/4op1F6yetJM>

**概要**
   - __o2-upload-to-fbs__は、AngularFire2を利用して、Firebase Storageにファイルをアップロードするためのツールです。

   - ファイル選択ボタンがサポートされています。

   - Firebase Storageの中のどのディレクトリにアップロードするかの指定ができます。

    ディレクトリの指定は、変数を使用することができ、このことにより認証後のユーザIDをディレクトリとして指定することが容易となります。   

**必要環境**

   - Node.js
   - TypeScript2
   - Angular2
   - AngularFire2
   - Firebase

**インストール方法**
　以下のようにnpmによりインストールできます。

```bash
$ npm install o2-upload-to-fbs --save
```


### Angular-CLIからの利用方法


#### Angular-CLIのインストール

```bash
$ npm install -g angular-cli
```

#### プロジェクトの作成

```bash
$ ng new sample-upload (Your project name)
$ cd sample-upload 
```
#### プロジェクトの稼働の確認

　インストールが終了しましたら、以下のようにローカルサーバを起動します。


```bash
$ ng serve
```
  するとローカルのhttpサーバが起動されますので、ブラウザから以下のアドレスにアクセスし、サンプルプログラムを起動します。

- "http://localhost:4200"  

 正常に起動した場合には、以下のような初期画面が表示されます。

  - ***初期画面*** 

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/install/first-view-by-localserver01.png" width= "640" >



#### ローカルサーバの停止

ここで、**Ctrl+C** を押した後 **y+リターン** により、ローカルサーバを一旦停止します。


#### __o2-upload-to-fbs__ のインストール

次に目的の__o2-upload-to-fbs__を以下のようにインストールします。
```bash
$ npm install o2-upload-to-fbs --save
```

#### Firebaseの認証データの確認

本プログラムの稼働をチェックするためには、当然のことながらFirebaseのアカウント並びにプロジェクトが必要になります。まだ、プロジェクトを作成されていない場合には、テスト用のプロジェクトを作成しておいてください。

<https://www.firebase.com/login/>  

認証用に必要なデータは以下の通りです。

   - apiKey
   - authDomain
   - databaseURL
   - storageBucket
   - messagingSenderId

Firebaseのコンソール画面から、__Overview__ページを選択し、__ウェブアプリにFirebaseを追加__アイコンをクリックします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/FirebaseConsoleOverview11.png" width= "640" >

すると、認証用のConfigデータが表示されますので、そのデータをコピーしておきます。
  
  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/FirebaseGetConfigData11.png" width= "640" >

#### __app.module.ts__ の修正

次にブラウザからプログラムのディレクトリに戻り、__src/app__に移動します。

```bash
$ cd src/app
```
このディレクトリ内に **app.module.ts** がありますので、これを以下のように修正します。また、以下の__firebaseConfig__においては、上記でコピーした認証用データを貼り付けます。

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

  // 追加 Start --------------------------------------------

import { AngularFireModule } from 'angularfire2'; 		
import { O2UploadToFbsComponent } from 'o2-upload-to-fbs';	

export const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxxxxxxxx.firebaseio.com",
    storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxxxxx"

};
  // 追加 End --------------------------------------------


@NgModule({
  declarations: [
    O2UploadToFbsComponent,  // <= 追加
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)  // <= 追加

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```


#### __app.component.html__の修正
このディレクトリ内に **app.component.html** がありますので、これを以下のように修正します。 

```html

<h1>
  {{title}}
</h1>
<!-- 追加 Start -->

<o2-upload-to-fbs [fbsBasePath] = "'images/'" [btnSelectText] = "'Browse'"></o2-upload-to-fbs>

<!-- 追加 End -->


```

ここでは２つのパラメータを指定しています (**fbsBasePath** and **btnSelectText**)

   - **fbsBasePath**   : Firebase Storage内のアップロード先 
                    (eg. 'images/' --> 'xxxxxxxx.appspot.com/images/')
   - **btnSelectText** : アップロードする際に使用するファイル選択ボタンのタイトル



#### __Firebase Storage Rule__の確認

このプログラムでは、認証機能が実装されていないので、Firebase Storage内でのテストアップロード先のパスを非認証ユーザであってもアクセス可能としておく必要があります。

そのためには、Firebase Storageにおいて__ルール__を設定しておく必要があります。

Firebaseコンソールから,**Storage** ページを表示し、さらに**Rules** タブをクリックします。

本プログラムでは、デフォルトでアップロード先を"images /"としているので"images /"ディレクトリのアクセス権を以下のように変更します。なお、**your_project_name** はあなたのプロジェクト名に変更してください。


```typescript

service firebase.storage {
  match /b/your_project_name.appspot.com/o {
    match /images/{allPaths=**} {
      allow read, write;
    }
  }
}

```

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/FirebaseStorageRule11.png" width= "640" >


#### ローカルサーバの再起動
以下のようにローカルサーバを再起動します。 

```bash
$ ng serve
```
すると以下のようにブラウザから **http://localhost:4200** にアクセスすると、新たに__Browse__ボタンが追加されているのがわかります。このボタンをクリックします。
 
  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/O2UploadToFbs_Initial11.png" width= "640" >

 
Firebase Storageにアップロードしたいファイルを選択します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/O2UploadToFbs_SelectFile12.png" width= "640" >

アップロードの進行状況などを確認したい場合には、Chromeなどのブラウザからコンソール画面を開き確認してください。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/O2UploadToFbs_UploadComplete11.png" width= "640" >  

次にブラウザでFirebase Storageページを開き、さらに__File__タブをクリックします。すると"images/"ディレクトリが表示されますので、そのディレクトリ名をさらにクリックします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/O2UploadToFbs_UploadFileDir12.png" width= "640" >

すると、あなたのローカルコンピュータからFirebase Storageにアップロードしたファイルが表示されます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/firebase/O2UploadToFbs_DisplayUploadedFile11.png" width= "640" >



## バージョン

   - o2-upload-to-fbs : 0.1
   - Angular2     : 2.0.0
   - TypeScript   : 2.0.2
   - Angularfire2 : 2.0-beta,
   - Firebase     : 3.6



## 参考文献

- "ウェブでファイルをアップロードする",
<https://firebase.google.com/docs/storage/web/upload-files?hl=ja>

- "Angular2 / Ionic2 / How to upload and get file or image from firebase storage" ,2016/11/16,by Muhammet Bakan, 
<http://www.muhammetbakan.com/angular2-ionic2-how-to-upload-and-get-image-from-firebase-storage/>

- "Firebase storage and angularfire2 - Stack Overflow",
<http://stackoverflow.com/questions/38593188/firebase-storage-and-angularfire2>

- "feat(storage): upload, read, and process* files #213",2016/6/8,
<https://github.com/angular/angularfire2/issues/213>



## 変更履歴

 - 2017.2.19 version 0.1 uploaded 

## Copyright

copyright 2017 by Shuichi Ohtsu (DigiPub Japan)


## License

MIT © [Shuichi Ohtsu](ohtsu@digipub-net.com)