Monacaでファイルのアップロードやダウンロードを行う場合は、File Transferプラグインを利用します。
File Transferプラグインは、Monacaの基本Cordovaプラグインに含まれており、Basicプランから利用することができます。
File Transferプラグインの使い方
まず初めに、対象のプロジェクトの「Cordovaプラグインの管理」から、File Transferプラグインを有効にします。
プロジェクトでFile Transferプラグインが利用できるのは、devicereadyイベント発行後になります。
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("File Transferプラグインが利用できます。");
}
</script>
ファイルのダウンロード
Monacaのホームページにある画像をアプリケーションのサンドボックス内の一時フォルダーにダウンロードしてみたいと思います。
コードは、下記になります。
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// ダウンロード元
var uri = encodeURI("https://ja.monaca.io/img/index/img_1.jpg");
// ダウンロード先
var fileURL = "cdvfile://localhost/temporary/img_1.jpg";
// ファイルのダウンロード
var fileTransfer = new FileTransfer();
fileTransfer.download(
uri,
fileURL,
function(fileSystem) {
console.log("toURL=" + fileSystem.toURL());
console.log("nativeURL=" + fileSystem.nativeURL);
console.log("toInternalURL=" + fileSystem.toInternalURL());
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("download error code " + error.code);
},
false,
{}
);
}
</script>
download()に設定するurlは、encodeURI()を使用してエンコードする必要があります。
ダウンロードが成功すると、ダウンロードしたファイルのFileSystemを取得することができます。このFileSystemのtoInternalURL()で、ダウンロード時に設定したダウンロード先を確認することができます。
このtoInternalURL()で取得した値は、FileプラグインのresolveLocalFileSystemURIに設定することで、ダウンロードしたファイルの移動やコピー等といった操作が可能になります。
ファイルの移動やコピーについては、Fileプラグインについてを参照してください。
ファイルのアップロード
ファイルのダウンロードの例でダウンロードした画像ファイルをサーバーへアップロードしてみたいと思います。
コードは、下記になります。
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// ダウンロード元
var uri = encodeURI("https://ja.monaca.io/img/index/img_1.jpg");
// ダウンロード先
var fileURL = "cdvfile://localhost/temporary/img_1.jpg";
// ファイルのダウンロード
var fileTransfer = new FileTransfer();
fileTransfer.download(
uri,
fileURL,
function(fileSystem) {
// ファイルのアップロード
uploadFile(fileSystem.toInternalURL());
},
function(error) {
console.log("download error");
},
false,
{}
);
}
// ファイルのアップロード
function uploadFile(uploadFileURL) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = "img_1.jpg";
options.mimeType = "image/jpeg";
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var fileTransfer = new FileTransfer();
fileTransfer.upload(uploadFileURL, encodeURI("http://サーバードメイン/uploader.php"), onUploadSuccess, onUploadFail, options);
function onUploadSuccess(result) {
console.log("Code = " + result.responseCode);
console.log("Response = " + result.response);
console.log("Sent = " + result.bytesSent);
}
function onUploadFail(error) {
console.log("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
}
</script>
サーバーサイドのプログラム(uploader.php)
<?php
$uploaddir = '/uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
echo 'File is valid, and was successfully uploaded.\n';
} else {
echo 'Possible file upload attack!\n';
}
echo 'Here is some more debugging info:';
print_r($_FILES);
echo '</pre>';
?>
File Transferプラグインを利用することにより、ファイルのダウンロードやアップロードが可能になります。File Transferプラグインを活用して、アプリケーション開発に役立ててください。