ファイルを$httpでアップロードする

2016-03-01
#angular

AngularJS1.5でファイルをアップロードする機能を追加したかったのだが、ファイルをアップロードしてもページ遷移はしたくなかったので、$httpを使ってAJAX的にプログラム内から送って、結果を受け取るようにした。

例として定義するモジュール

定義するモジュール名を仮にappとする：

// app.js
  angular.module('app', [])

選択したファイルをAngularJSに渡せるようにするためのディレクティブを定義する

HTMLのinput type="file"で選択したファイルをAngularJSに受け渡すためのディレクティブを定義する：

// app.js
  angular.module('app')
    .directive('fileModel', ['$parse', function($parse) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          const model = $parse(attrs.fileModel)
          element.bind('change', function() {
            scope.$apply(() => {
              model.assign(scope, element[0].files[0])
            })
          })
        },
      }
    }])
  • elementのchangeを監視して、変更されたらモデルを更新する

ファイルを選択してアップロードするためのHTML

上で定義したfile-modelディレクティブを使って、ファイルを選択するinputと、アップロードするためのボタンを用意する：

// index.html
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
  </head>
  <body ng-controller="AppController as appCtrl">
    <input type="file" file-model="myFile">
    <button ng-click="myFile&&appCtrl.upload(myFile)" ng-disabled="!myFile">Upload</button>
  </body>
</html>
  • コントローラAppControllerは後述
  • 選択したファイルをmyFileというモデル（変数名）に格納することにする
  • ボタンが押されたらappCtrlのuploadメソッドに、選択されたファイルmyFileを渡す

アップロードするサービス

ファイルを$httpで送る機能をAngularJSのサービスとして作成する：

// app.js
  angular.module('app')
    .service('fileUpload', ['$http', function($http) {
      this.uploadFileToUrl = function(uploadUrl, name, file) {
        const formData = new FormData()
        formData.append(name, file)
        const config = {
          headers: {
            'Content-Type': undefined,
          },
        }
        return $http.post(uploadUrl, formData, config)
      }
    }])
  • $http.postを使う
  • Content-Typeにundefinedを指定すると良きに計らってくれるらしい

ファイルをアップロードする

上で作成したファイルをアップロードするサービスを使って、コントローラ内からファイルをアップロードする：

// app.js
  angular.module('app')
    .controller('AppController', ['fileUpload', function(fileUpload) {
      this.upload = (file) => {
        fileUpload.uploadFileToUrl('/upload', 'upName', file)
          .then(
            (response) => {
              console.log('upload success')
              console.log(response.data)
            },
            (response) => {
              console.error('upload failed')
              console.log(response)
            })
      }
    }])
  • 依存関係にfileUploadを含めて、それを使う

関連記事

新着記事