Dropbox Platform 試してみた
Dropbox Platformというのが始まったので、とりあえず、
Drop-in という、フォームにDropboxのファイルのダウンロード、共有機能を試してみた。
Dropbox Platformの情報はこちら。
https://www.dropbox.com/developers
まずは、自分の API キーを発行する。
ここから登録する。
https://www.dropbox.com/developers/apply?cont=/developers/apps/create
取り急ぎ必要な情報は、自分のサイトのドメイン。
今回はさくっと動かすために、localhostを足した。
次に localhost で動く場所に html を配置する。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8" /> <title>Drop-in test</title> </head> <main> <script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="xhymi889q1c4jka"></script> <form> <input type="dropbox-chooser" name="selected-file" id="db-chooser"/> <script type="text/javascript"> // add an event listener to a Chooser button document.getElementById("db-chooser").addEventListener("DbxChooserSuccess", function(e) { alert("Here's the chosen file: " + e.files[0].link) }, false); </script> </form> </main> </html>
ボタンを押すと、
Dropboxにログインしてなければログイン画面、
ログインしていたらファイル選択画面が出てきて、
ファイルを選択すると、alertが表示されるはずである。
JSでDbxChooserSuccessで選択後のフックを行なっている。
また、JSで以下のオプションを事前に渡すこともできる。
- linkType 選択したファイルのリンクを発行するか、直接ダウンロードさせるか
- multiselect 複数ファイルを選択できるようにするか
- success 選択に成功したときのフック関数を渡す
- cancel 選択がキャンセルされたときのフック関数を渡す