#はじめに
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は無料で使えますが、割り当て（クオータ）については調べませんでした。あくまでも趣味の範囲で使う程度になるのかなと思います。