はじめに

　Javascriptからファイルをアップロードできるクラウドサービスとして、iCloudやFirebaseがしばしば使われます。しかし、Macを持っていないと開発が困難になったり、アップロードしたファイルがまとめてダウンロードできなかったりと、必ずしも便利とは言い切れません。そこで、OSを問わず、ダウンロードや共有も簡単なDropboxに接続してみることにしました。

Dropbox API Appの作成

　Dropboxの開発者ページから新規アプリを作成します。
　ちょっと古いですが、こちらの記事などを参考にしました。

コード

index.html

<!doctype html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
<body>
    <form id="form">
        <h3>ファイルを選択してアップロード</h3>
        <input type="file" id="file">
    </form>

    <script>
        var input = document.getElementById("file");

        //ダイアログでファイルが選択された時
        input.addEventListener("change",function(evt){
            //ファイルを取得      
            var file = evt.target.files;

            //ファイル名を取得
            var name = "/" + document.querySelector('#file').files[0].name;

            //FileReaderの作成
            var reader = new FileReader();

            //テキスト形式で読み込む
            reader.readAsText(file[0]);

            //読込終了後の処理
            reader.onload = function(ev){
                //ドロップボックスのファイルAPI
                json = {
                    url: 'https://content.dropboxapi.com/2/files/upload',
                    type: 'post',
                    data: reader.result,
                    processData: false,
                    contentType: 'application/octet-stream',
                    headers: {
                        "Authorization": "Bearer <YOUR ACCESS TOKEN>",
                        "Dropbox-API-Arg": '{"path": "'+name+'","mode": "add","autorename": true,"mute": false}'
                    },
                    success: function (data) {
                        console.log('s' + data);
                    },
                    error: function (data) {
                        console.error('e'+ data);
                    }
                }

                //ドロップボックスにアップロード
                $.ajax(json)
            }
        },false);
    </script>
</body>
</html>

　しかし、このままではアップロードできません。

日本語対応ではない？

　理由は不明ですが、ファイル名がUTF-8でなければエラーが出ます。
　そのため、変数nameの文字コードを変換します。こちら記事を参考にしました。

//ファイル名を取得
var name = "/" + document.querySelector('#file').files[0].name;

//ファイル名をUTF-8に変換
var name = encode_utf8(name);

function encode_utf8(s){
    return unescape( encodeURIComponent(s));
}

おわりに

　DropboxのAPIは無料で使えますが、割り当て（クオータ）については調べませんでした。あくまでも趣味の範囲で使う程度になるのかなと思います。

JavaScriptでDropboxにファイルをアップロードしてみました

はじめに

Dropbox API Appの作成

コード

日本語対応ではない？

おわりに