cordova-plugin-file-transfer でファイルをアップロードする

cordova-plugin-file-transfer を使うと、Cordova アプリ内の任意のファイルをサーバに向けてアップロードすることができる。

まずはプラグインをインストールする。

$ cordova plugin add cordova-plugin-file-transfer

cordova-plugin-file がインストールされていなければこちらも同時にインストールされるはず。

次に、以下のようにしてファイルの送信処理を作成する。

// cordova-plugin-file を入れると使えるようになる File URL へのエイリアスを利用し、送信したいファイルを特定する
const fileUrl = window.cordova.file.tempDirectory + 'Test.txt';

// 送信先サーバの URL
const url = encodeURI('http://example.com/upload.php');

// オプションを作成する
const options = new FileUploadOptions();
options.fileKey     = 'file';        // ファイルのキー (通常は 'file' で良い)
options.fileName    = 'Test.txt';    // ファイル名
options.mimeType    = 'text/plain';  // MIME Type
options.httpMethod  = 'POST';        // 送信するメソッド
options.chunkedMode = true;          // チャンクストリームモード
// パラメータ
options.params = {
  value1: 'Test Value',
  value2: 'Example Value'
};
// ヘッダ
options.headers = {
  'headerParam': 'headerValue'
};

// ファイルを送信する
const fileTransfer = new FileTransfer();
fileTransfer.upload(fileUrl, url, function(result) {
  console.log(`送信成功 : ${result.responseCode}・${result.bytesSent}・${result.response}`);
}, function(error) {
  console.log(`送信失敗 : ${error.code}・${error.source}・${error.target}`);
}, options, true);

FileTransfer#upload() の第5引数の boolean 値は trustAllHosts オプション。true にすると全ての証明書を許可する (iOS のみ)。

ちなみにこのプラグインには download() メソッドもある。

// 保存先となるファイルパスを作る
const fileUrl = window.cordova.file.tempDirectory + 'Test.txt';

// ファイルのダウンロード先 URL
const url = encodeURI('http://example.com/download.php');

const fileTransfer = new FileTransfer();
fileTransfer.download(url, fileUrl, function(entry) {
  console.log(`受信成功 : ${entry.toURL()}`);
}, function(error) {
  console.log(`受信失敗 : ${error.code}・${error.source}・${error.target}`);
}, true, {
  headers: {
    'authorization': 'authorization result'
  }
});

FileTransfer#download() の第5引数の boolean 値は trustAllHosts オプション。第6引数は options を指定できる場所だが、ダウンロードの場合は HTTP ヘッダ (headers) しか指定できない。

ひとまずこんな感じ。パラメータや HTTP ヘッダを任意で付与でき、サクッとアップロード機能が作れるので良い感じ。