サンプルアプリ
図1は今回紹介するサンプルアプリのキャプチャー画面です。ダウンロードではサーバ上に存在するファイルをダウンロードし完了するとその画像を表示します。
また、アップロードでは画像データをサーバにアップロードし結果をJSONで受信し、そのメッセージを表示します。
アップロード時のサーバはリスト2のようなコードを用意しました。
![図1 サンプルアプリの画面キャプチャ](http://cz-cdn.shoeisha.jp/static/images/article/9577/9577_001_s.gif)
<?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に示す引数が指定できます。
FileTransfer.download(source,target,successCallback,errorCallback,[trustAllHosts,[options]]);
また、それぞれの引数の意味は、表5のとおりです。
引数 | 概要 |
---|---|
source | ネットワーク上のリソースを示すパス。encodeURIを使ってパスをエンコードする。 |
target | ローカルの保存するパス |
successCallback | 成功した場合のコールバック関数。関数の引数にはEntryオブジェクトが設定される |
errorCallback | 失敗した場合のコールバック関数。関数の引数にはFileTransferErrorオブジェクトが設定される |
trustAllHosts | すべてのホストを信頼するか?オレオレ証明書などをもちいている場合にtrueにする。通常の運用ではfalseにする。 |
options | 追加で指定する任意のヘッダを指定する。BASIC認証などが必要な場合にはこちらに追加のヘッダを指定する。 |
ネットワーク上のファイルをローカルに保存するサンプルコードがリスト4のようになります。
// (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 | ダウンロード、もしくはアップロードするファイルのトータルサイズ |