AngularJSで入力生産性の高いフォームを実装しよう（オートコンプリート／ファイルアップローダー）

AngularJSアプリ開発を支援する便利モジュール 第1回

ファイルアップロード機能を実装したい - ng-file-upload

　ng-file-uploadを利用することで、ドラッグ＆ドロップ対応のファイルアップローダーをごくシンプルなコードで実装できます。あらかじめ用意した領域にファイルをドロップすることで、自動的にアップロード処理が実施されます。ドラッグ＆ドロップ機能に対応していないブラウザーでは、ドロップ領域をクリックすることで、ファイル選択ボックスからアップロードファイルを選択することもできます。

ファイルをドラッグ＆ドロップでアップロード

　ng-file-uploadは、Bowerを利用することで、以下のコマンドでインストールできます。

bower install --save ng-file-upload

　では、基本的なアップロード機能を実装してみましょう。

リスト8　upload.html

<!--（1）ng-file-uploaderの動作に必要なライブラリをインポート-->
<link rel="stylesheet" href="css/upload.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload-shim.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="scripts/upload.js"></script>
...中略...
<form>
<!--（3）アップロード領域を準備-->
<div ngf-drop ngf-select ng-model="files"
  ngf-multiple="true" ngf-allow-dir="false"
  ngf-accept="'.jpg,.png,.gif'"
  class="drop" ngf-drag-over-class="dragover">
  ここにファイルをドロップ、またはクリックしてください。
</div>
</form>

リスト9　upload.js

// （2）ui.bootstrapモジュールへの依存関係を宣言
angular.module('myApp', ['ngFileUpload'])
  .controller('MyController', ['$scope', 'Upload', function ($scope, Upload) {
    // （4）ファイル選択時にアップロード処理を実行
    $scope.$watch('files', function () {
      var fs = $scope.files;
      // ファイルが一つ以上指定されている場合に…
      if (fs && fs.length) {
        // 先頭のファイルから順にアップロードを実行
        for (var i = 0; i < fs.length; i++) {
          var f = fs[i];
          // アップロードの実処理
          Upload.upload({
            url: 'upload.php',
            file: f
          })
          // （5）アップロード成功時にログ表示
          .success(function (data, status, headers, config) {
            console.log(config.file.name + ' success!!'));
          });
        }
      }
    });
 }]);

　ng-file-uploadを利用するにはライブラリ本体（ng-file-upload-shim.min.js／ng-file-upload.min.js）をインポートした上で（1）、アプリモジュール（myApp）からngFileUploadモジュールへの依存関係を宣言します（2）。

　アップロードファイルをドラッグ＆ドロップするための領域を定義するのは、ngf-drop属性（ディレクティブ）です（3）。また、領域クリックでファイル選択ボックスを起動できるように、ngf-select属性（ディレクティブ）も併記しておきます。ドラッグ＆ドロップ機能だけで良いならばngf-select属性は不要ですし、ドラッグ＆ドロップ機能が不要であればngf-drop属性は不要です。

　そのほか、ngf-drop／ngf-selectディレクティブに付随する属性には、以下のようなものがあります。

ng-file-uploadの主な属性

属性	概要
ng-model	アップロードファイルをバインドする変数
ngf-drag-over-class	ドラッグしたファイルを領域に乗せた時に適用するスタイル
ngf-multiple	複数ファイルを選択できるようにするか（デフォルトはfalse）
ngf-accept	アップロード可能なファイル形式（例：「image/*」。カンマ区切り）
ngf-max-size	アップロード可能な最大ファイルサイズ（バイト単位）
ngf-allow-dir	フォルダーをアップロード可能にするか（WebKit系ブラウザーのみ）

　選択したファイルはng-model属性で指定した変数filesに反映されますので、$scope.$watchメソッドでこれを監視して、ファイルが選択されたタイミングでアップロード処理を実行します（4）。アップロードを実行するには、Uploadサービスのuploadメソッドを呼び出します。uploadメソッドは、引数として、以下のようなパラメーターを受け取ります。

uploadメソッドの主なパラメーター

パラメーター名	概要
url	アップロード先のパス
file	アップロードするファイル
fileName	ファイル名
method	アップロードで利用するHTTPメソッド（デフォルトはPOST）

　urlパラメーターで指定したファイル（ここではupload.php）で、サーバーへの保存処理を実装します。サーバー側の処理は本稿の守備範囲外なので、詳しくは配布サンプルのコードを参照してください。

　アップロードに成功した場合の処理は、successメソッドのコールバック関数として指定します（5）。コールバック関数は、引数として、

• レスポンス本体（data）
• ステータスコード（status）
• 応答ヘッダー（headers）
• リクエスト時の設定情報（config）

を受け取りますので、ここではconfig.file.nameでアップロードファイルの名前を取得／ログ出力しています。

まとめ

　以上、本稿では入力生産性を効率化するためのライブラリとして、UI Bootstrap（Typeahead）とng-file-uploadについて解説しました。特に、UI Bootstrapは、Typeaheadのほかにも、さまざまに定番ウィジェットを提供する高機能なライブラリです。本連載でも、主なものを引き続き紹介していく予定です。

　次回は、引き続きスライダー、レーティングバー、カラーピッカーなど、入力フォームを利用しやすくするためのライブラリを紹介する予定です。

参考資料

• 『AngularJSアプリケーションプログラミング』（技術評論社）
• 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）