Dropbox APiを用いてファイルアップロードを実装する(JavaScript)

Dropbox APiを用いてファイルアップロードを行う処理を作成したので備忘録。

Dropbox APIの利用開始手順

まずは下記のページからアプリを作成をクリック。

Developers - Dropbox

アプリ作成に関するフローでは特に詰まるところはなかったので割愛する。
（まあ、スクリーンショットを取っていなかっただけなのだが）

Dropbox API経由でどこまでアクセスできるか？なども設定できるので、私は特定のフォルダのみにアクセスするようにするなど設定した。

あとDropbox APIアプリを作成すると、Dropbox内に アプリ というフォルダが作られ、そこの配下に設定したアプリ名でフォルダが作られ、そこに対してアクセスが許可されるようになる。
(これは特定のフォルダのみに権限を絞った場合のみかと思われる。確認はしていない）

そのため、 アプリ名はフォルダを意識して作成したほうが良さそうに思われるが、アプリ作成後の画面で利用するフォルダ名は別途変更できるので、あまり気にしなくても良い。

アプリを作成すると、作成したアプリの設定画面的なものが表示される。

アプリの権限変更

今回ファイルアップロードを行うため、権限を標準のものから変更しておく必要がある。

具体的には files.content.write という権限を付与する。
アプリの permission タブから権限の付与は行える。

このチェックを付けている箇所が該当する権限となる(files.content.write)

変更すると、画面下部にsubmitのためのボタンが出てくるので、submitしておくこと。
（なお、変更することによって既存のトークンは影響を受けないようだ。ただし、変更後の内容をアプリ側に適用する場合は、新たにトークンを生成し直す必要があることに注意。今回はまだトークンを生成していないので関係ない）

ちなみにDropboxサイト内のCookie利用ポリシーもsubmitボタン同様、画面下部に出てくる。
このCookie利用ポリシーに隠れてsubmitボタンが隠れてしまうので、Cookie利用ポリシーは先に対応しておくこと（同意 or 同意しない）

※これのこと↓

ここまで作業を行い、トークンを生成する。

これでアプリを利用するまでの準備は完了。あとは処理を書くだけ。

Node.jsでファイルアップロード処理を書く

私は今回Node.js( .mjs )でアップロード処理を書いた。
特にこだわりがなければnpmに公開されている公式のモジュールを使うのが早い。

www.npmjs.com

コードのサンプルはこちら。
foobar.zip というzipファイルをアップロードするサンプルとなる。

import { Dropbox } from "dropbox";
import fs from "fs/promises";

const accessToken = "ここにトークンを書く";
const dbx = new Dropbox({ accessToken });

try {
  const uploadFile = await fs.readFile("foobar.zip");
  const response = await dbx.filesUpload({
    path: "/foobar.zip",
    contents: uploadFile,
  });
  console.log({ response });
} catch (err) {
  console.error({ err });
}

これでDropbox内の /アプリ/<アプリで設定したフォルダ名>/foobar.zip にアップロードが完了する。