Monacaでファイルのアップロードやダウンロードを行う場合は、File Transferプラグインを利用します。
File Transferプラグインは、Monacaの基本Cordovaプラグインに含まれており、Basicプランから利用することができます。
File Transferプラグインの使い方
まず初めに、対象のプロジェクトの「Cordovaプラグインの管理」から、File Transferプラグインを有効にします。
プロジェクトでFile Transferプラグインが利用できるのは、devicereadyイベント発行後になります。
1 2 3 4 5 6 7 |
<script> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { alert("File Transferプラグインが利用できます。"); } </script> |
ファイルのダウンロード
Monacaのホームページにある画像をアプリケーションのサンドボックス内の一時フォルダーにダウンロードしてみたいと思います。
コードは、下記になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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プラグインについてを参照してください。
ファイルのアップロード
ファイルのダウンロードの例でダウンロードした画像ファイルをサーバーへアップロードしてみたいと思います。
コードは、下記になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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プラグインを活用して、アプリケーション開発に役立ててください。