ファイルのアップロード
ファイルのアップロードでは、FileTransferのuploadメソッドを利用し、表7に示す引数が指定できます。
リスト5 ファイルのダウンロード
FileTransfer.upload(fileURL,serverURL,successCallback,errorCallback,[options,[trustAllHosts]]);
また、それぞれの引数は表7のようになります。
| 引数 | 概要 |
|---|---|
| fileURL | アップロードするファイルのパス |
| serverURL | アップロードするサーバへのURL。encodeURI()を使ってエンコードする。 |
| successCallback | 成功した場合のコールバック関数。関数の引数にはFileUploadResultオブジェクトが設定される |
| errorCallback | 失敗した場合のコールバック関数。関数の引数にはFileTransferErrorオブジェクトが設定される |
| options | 追加で指定する任意のヘッダを指定する。BASIC認証などが必要な場合にはこちらに追加のヘッダを指定する。 |
| trustAllHosts | すべてのホストを信頼するか？オレオレ証明書などをもちいている場合にtrueにする。通常の運用ではfalseにする。 |
ローカルファイルをサーバにアップロードするサンプルコードがリスト6のようになります。
リスト6 ファイルのアップロード（app/www/js/controllers/FileUploadController.jsの抜粋）
// （1）FileTransferオブジェクトを作成
var fileTransfer = new FileTransfer();
// （2）アップロード時のオプションオブジェクトの作成
var options = new FileUploadOptions();
options.fileKey = "image";
options.fileName = "sample.png";
options.mimeType = "image/png";
fileTransfer.upload(
cordova.file.applicationDirectory + "www/img/upload.png", // （3）データのパスを指定
encodeURI("http://192.168.1.7:8080/cdv7/put.php"), // （4）リクエスト（アップロード）するパスを指定
function(result){ // （5） 成功した場合のコールバック関数
var body = result.response; // （6） サーバからのレスポンス
if(result.response) {
var ret = JSON.parse(body);
var message = ret.message;
$scope.$apply(function(){
$scope.message = ret.message;
});
}
},
function(error){
alert('ERROR (' + error.code + ')');
},
options // （7）オプションの指定
);
// （8）アップロード中の状況を把握するためのイベント処理
fileTransfer.onprogress = function(event){
if(event.lengthComputable){
$scope.$apply(function(){
$scope.progress = "uploaded :" + event.loaded + "/" + event.total;
});
}
};
（1）ではFileTransferオブジェクトを作成します。
続いて、（2）でアップロードする際のオプション情報を設定します。オプションには表8のような指定が可能です。
| プロパティ | 説明 |
|---|---|
| fileKey | フォームでのname属性の値。デフォルトは"file"。 |
| fileName | アップロードするファイル名。デフォルトは"image.jpg"。 |
| httpMethod | アップロードする際のHTTPメソッド。POSTもしくはPUT。デフォルトはPOST。 |
| mimeType | アップロードするファイルのMIMEタイプ。デフォルトは"image/jpeg"。 |
| params | 追加で指定する任意のリクエストパラメータ。 |
| chunkedMode | アップロードする際にChunked形式で送信するか否かを指定します。Chunked形式ではデータを一括で送信せずに分割し、データ量が多い場合に有効な送信方法です。デフォルトはtrue。 |
| headers | 任意の指定するヘッダ情報。 |
メソッドには（3）ローカルファイルのパスと（4）encodeURIメソッドを使って指定したアップロードするURLを指定します。
続いて、（5）成功時のコールバック関数では表9に示すFileUploadResultオブジェクトが取得できます。サーバからのレスポンスはresponseプロパティから取得で取得できます。
（7）で（2）で作成したFileUploadOptionsのオブジェクトを指定します。
ダウンロードと同様に（8）のようにonprogressプロパティに関数を指定することでアップロード中の状況を把握できます。
| プロパティ | 説明 |
|---|---|
| bytesSent | 送信されたデータ量。 |
| responseCode | アップロードした際のHTTPレスポンスコード。 |
| response | レスポンス結果の文字列。 |
アップロードに成功するとPHPではリスト7のような$_FILES変数が設定されます。
リスト7 PHPでのアップロードされたファイルの情報
$_FILES["image"] = array(
"name" => "sample.png",
"type" => "image/png",
"tmp_name" => "/private/var/tmp/phpWQlHY5"
"error" => 0,
"size" => 46976
);
最後に
今回紹介したFileTransferプラグインを利用すると非常に簡単にファイルのアップロードやダウンロードの機能を追加できます。これらの機能はネットワークを利用しますので、第4回で紹介したネットワーク情報を取得するプラグインも併せて参照することをおすすめします。
オフライン時でも様々な操作ができることがWebアプリと違い便利なところですので、これらのプラグインを有効に使ってさらに便利なアプリの制作に役立ててください。
