サンプルアプリ
図1は今回紹介するサンプルアプリのキャプチャー画面です。ダウンロードではサーバ上に存在するファイルをダウンロードし完了するとその画像を表示します。
また、アップロードでは画像データをサーバにアップロードし結果をJSONで受信し、そのメッセージを表示します。
アップロード時のサーバはリスト2のようなコードを用意しました。
リスト2 アップロード時のサーバ側のPHPコード
<?php
if(isset($_FILES['image'])) {
$ret = array();
$ret['file'] = $_FILES['image'];
$ret['message'] = "Upload OK";
print json_encode($ret);
}
else{
$ret = array();
$ret['message'] = "Image Not Found";
print json_encode($ret);
}
?>
ファイルのダウンロード
ファイルのダウンロードでは、FileTransferのdownloadメソッドを利用し、表5に示す引数が指定できます。
リスト3 ダウンロードメソッド
FileTransfer.download(source,target,successCallback,errorCallback,[trustAllHosts,[options]]);
また、それぞれの引数の意味は、表5のとおりです。
| 引数 | 概要 |
|---|---|
| source | ネットワーク上のリソースを示すパス。encodeURIを使ってパスをエンコードする。 |
| target | ローカルの保存するパス |
| successCallback | 成功した場合のコールバック関数。関数の引数にはEntryオブジェクトが設定される |
| errorCallback | 失敗した場合のコールバック関数。関数の引数にはFileTransferErrorオブジェクトが設定される |
| trustAllHosts | すべてのホストを信頼するか？オレオレ証明書などをもちいている場合にtrueにする。通常の運用ではfalseにする。 |
| options | 追加で指定する任意のヘッダを指定する。BASIC認証などが必要な場合にはこちらに追加のヘッダを指定する。 |
ネットワーク上のファイルをローカルに保存するサンプルコードがリスト4のようになります。
リスト4 ファイルのダウンロード（app/www/js/controllers/FileTransferController.jsの抜粋）
// （1）FileTransferオブジェクトを作成
var fileTransfer = new FileTransfer();
fileTransfer.download(
encodeURI("http://192.168.1.1/cdv7/images/img.png"), // （2）ダウンロードするURLの指定
"cdvfile://localhost/persistent/img.png", // （3）保存先のパスを指定
function(entry){ // （4）成功した場合のCallback関数の指定
// FileEntry
$scope.$apply(function(){
// <img src="cdvfile://localhost/persistent/img.png" />と同様の設定
$scope.img_path = "cdvfile://localhost/persistent/img.png";
});
},
function(error){ // （5）失敗した場合のCallback関数の指定
alert('ERROR (' + error.code + ')');
},
false,
// （6）ヘッダの指定
{
headers : {
'X-Extra-Header' : 'Hoge'
}
}
);
// （7）ダウンロード中の状況を把握するためのイベント処理
fileTransfer.onprogress = function(event){
if(event.lengthComputable){
$scope.$apply(function() {
$scope.progress = "loaded :" + event.loaded + "/" + event.total;
});
}
};
（1）ではFileTransferオブジェクトを作成します。
downloadメソッドには（2）encodeURIメソッドを使って指定したダウンロードするURLと、（3）保存するパスをまず指定します。
続いて、（4）成功時のコールバック関数ではFileEntryオブジェクトが取得できますので、その後の処理をFileEntryオブジェクトを使って行います。
また、（5）失敗した場合のコールバック関数ではFileTransferErrorが取得できます。
ファイルをダウンロードする際に任意のヘッダが必要な場合は（6）のようにして任意のヘッダの指定が可能です。現時点では、headersというキーが指定可能でき、それ以外は指定できません。
ファイルのダウンロード中の状況を把握するには（7）のようにonprogressプロパティに関数を設定する事で可能で、表6に示す各プロパティ値の取得が可能です。
| 変数 | 説明 |
|---|---|
| lengthComputable | 進捗状況でデータサイズが取得ができる状態になったことを示すフラグ |
| loaded | ダウンロード、もしくはアップロード済みのデータサイズ |
| total | ダウンロード、もしくはアップロードするファイルのトータルサイズ |
