CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/09/04 14:00
目次

ファイルアップロード機能を実装したい - 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のほかにも、さまざまに定番ウィジェットを提供する高機能なライブラリです。本連載でも、主なものを引き続き紹介していく予定です。

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

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5