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プラグインを活用して、アプリケーション開発に役立ててください。