容量無制限Dropboxで容量無制限Imgurを作る

See the Pen Dropbox by John Doe (@04) on CodePen.

Dropboxが容量無制限になったので実質容量無制限の画像共有サイト作ってみました
ファイルをアップロードして、共有リンクを作成できます。

async function uploadFile(file) {
  const now = new Date()
    .toLocaleString("sv")
    .replace(" ", "_")
    .replaceAll(":", "_");
  const path = "/" + now + "-" + file.name.replace(/[^\x00-\x7F]/g, "");
  await fetch("https://content.dropboxapi.com/2/files/upload", {
    body: file,
    method: "POST",
    headers: {
      "Content-Type": "application/octet-stream",
      "Dropbox-API-Arg": JSON.stringify({ path }),
      Authorization: "Bearer " + TOEKN
    }
  });
  const res = await fetch(
    "https://api.dropboxapi.com/2/sharing/create_shared_link_with_settings",
    {
      body: JSON.stringify({
        path,
        settings: {
          access: "viewer",
          allow_download: true,
          audience: "public"
        }
      }),
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + TOEKN
      }
    }
  ).then((r) => r.json());
  return res.url
    .replace("www.dropbox.com", "dl.dropboxusercontent.com")
    .replace(/\?dl=0$/, "");
}

アクセストークンの作り方

リンクを開きます

https://www.dropbox.com/login?cont=https%3A%2F%2Fwww.dropbox.com%2Fdevelopers%2Fapps%3F_tk%3Dpilot_lp%26_ad%3Dtopbar4%26_camp%3Dmyapps

アプリを作成し、Permissionsにチェックをいれます

Settingsでアクセストークンを生成する