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 選択がキャンセルされたときのフック関数を渡す