読者です 読者をやめる 読者になる 読者になる

cordovaでファイルアップロードを実装する方法

angularjs cordova phonegap

やりたかったこと

webサイトでよくあるファイルアップロード機能をcorodovaアプリでも実装する必要がありました。
最初はwebサイトと同じようにinputタグのtype=fileで実装しようとしてたんですけどcordovaのプラグインを調べてみると以下のプラグインがありました。
・ImagePicker
・File Transfer

ImagePickerはデバイスの画像選択画面を使える機能
File Transferは端末の画像(ファイル)をサーバにアップロード機能(逆にダウンロードもできるようです)

まずはどのようなUIになるか。
そしてどのように実装するかを簡単にサンプルをあげます。

どんな画面になるか

iPhoneシュミレータですがこんな感じになります

1. これはhtmlで作ったページ
f:id:yoppy0066:20150123022252p:plain
このページの「追加」ボタンをおすと


2. フォルダの選択ページに遷移します(これはネイティブ側)
f:id:yoppy0066:20150123022412p:plain
さらにフォルダを選択すると


3. 画像の選択ページに遷移します
f:id:yoppy0066:20150123022827p:plain
で、画面右上の「done」ボタンを押すとhtml(javascript)へ制御が戻ります
もちろん選択した画像のファイルを返してくれます

実装してみる

なにはともあれプラグインをインストール。これでjavascriptから簡単に呼び出せるようになります。
で、実際に実装してみると以下のような形になります。

cordova plugin add https://github.com/wymsee/cordova-imagePicker.git &&
cordova plugin add org.apache.cordova.file-transfer

で、実際に使用してみる。

myApp.controller("ControllerAddional", function($scope, $cordovaImagePicker, $cordovaFileTransfer) {
    // 画像フォルダの呼出し(デバイスへ遷移します)
    $cordovaImagePicker.getPictures({
        maximumImagesCount: 10,
        width: 800,
        height: 800,
        quality: 80
    }).then(function (results) {
        // 選択した結果がresultsへ入ります
        for (var i = 0; i < results.length; i++) {
            alert('Image URI: ' + results[i]);
            // 1ファイルずつサーバへアップロード
            $cordovaFileTransfer.upload(
              "http://example.com/upload", results[i], {}
            ).then(function(result) {
                alert("OK");
                // Success!
            }, function(err) {
                alert("NG");
               // Error
            }, function (progress) {
                // constant progress updates
            });
        }
    }, function(error) {
        // error getting photos
    });
});

オプションとかはまだ理解しきれてはいないのですが簡単に使えますね。
これをファイルのアップロード画面からhtmlで作りこむよりははるかに簡単ですし、複数ファイルを簡単に選択できるのも大きいメリットだと思います。
あ、ちなみにこのコードはangular.jsから簡単にcordovaプラグインを呼び出すためのngcordovaというangular.js内のプラグインを使ったものとなってます。

以上です