Cordova上でAngularJSから画像をform-dataでPOSTする

ネット上だとinputにパスが直接入れられている場合のサンプルが多かったので、載せておきます。

実際はIonic Frameworkを利用し、またngCordovaを導入している。 環境は下記。

• iOS 9.2.x
• Ionic Framework 1.2.4
• AngularJS 1.4.3
• Cordova V6.0.0
• ngCordova

利用プラグインは下記。

• cordova-plugin-camera 2.1.0 “Camera”
• cordova-plugin-file 4.1.1 “File”

アップロードする画像はCameraプラグインで撮った写真です。 ファイルプラグインはカメラで撮った画像のパスを移動するため利用しています。 コード上File Pluginは利用しているのでそのまま動かす場合は必須です。

File Pluginは$cordovaFile.checkFileの部分です。ngCordovaのソースを見るとwindow.resolveLocalFileSystemURLをラップしてるだけなので、他の機能を利用しない場合置き換えできます（多分）。

利用は下の感じでできます。

/**
 * FileUploader sample
 */
angular.module('app')
  .controller('SampleCtrl', ['FileUploader', function (FileUploader) {
    this.uploade = function () {
      FileUploader.fileUpload('file://hogehoge.jpg', 'hogehoge.jpg')
        .then(function (data) {
          // success
          console.log(data);
        })
        .catch(function (error) {
          // error
          console.error(error);
        });
    };
  })
;