ファイルアップロード機能を実装したい - ng-file-upload
ng-file-uploadを利用することで、ドラッグ＆ドロップ対応のファイルアップローダーをごくシンプルなコードで実装できます。あらかじめ用意した領域にファイルをドロップすることで、自動的にアップロード処理が実施されます。ドラッグ＆ドロップ機能に対応していないブラウザーでは、ドロップ領域をクリックすることで、ファイル選択ボックスからアップロードファイルを選択することもできます。
ng-file-uploadは、Bowerを利用することで、以下のコマンドでインストールできます。
bower install --save ng-file-upload
では、基本的なアップロード機能を実装してみましょう。
<!--（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>
// （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-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メソッドは、引数として、以下のようなパラメーターを受け取ります。
| パラメーター名 | 概要 |
|---|---|
| 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プロジェクト）
