SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSアプリ開発を支援する便利モジュール連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8904 2015/09/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング