インテグレーションAPI を使ってローカルファイルをアセットに登録する

更新日2026年8月19日

ローカルにある画像やファイルを Re:Earth CMS のアセットとして登録する方法を説明します。アセットに登録したファイルは、アイテムのフィールドから参照したり、パブリックAPI 経由で配信したりできます。

サンプルコード

curl
JavaScript

curl -X POST \
  'https://api.cms.reearth.io/api/<workspace>/projects/<project>/assets' \
  --header 'Authorization: Bearer <your_integration_token>' \
  --form 'file=@/path/to/file.jpg'

ブラウザのファイル選択フォームと組み合わせる例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>アセットアップロード</title>
</head>
<body>
  <input type="file" id="file-input" />
  <button id="upload-btn">アップロード</button>

  <script>
    const WORKSPACE_ID = "<workspace_id_or_alias>";
    const PROJECT_ID = "<project_id_or_alias>";
    const TOKEN = "<your_integration_token>";

    const url = `https://api.cms.reearth.io/api/${WORKSPACE_ID}/projects/${PROJECT_ID}/assets`;

    document.getElementById("upload-btn").addEventListener("click", async () => {
      const file = document.getElementById("file-input").files[0];
      if (!file) return alert("ファイルを選択してください");

      const formData = new FormData();
      formData.append("file", file);

      const resp = await fetch(url, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${TOKEN}`,
        },
        body: formData,
      });

      if (!resp.ok) {
        const text = await resp.text();
        throw new Error(`HTTP ${resp.status}: ${text}`);
      }

      const asset = await resp.json();
      alert(`アップロード完了: ${asset.name}`);
    });
  </script>
</body>
</html>

実行結果

簡易的なアップロードフォームでファイルを選択し、アップロードを実行します。

簡易的なアセットアップロードフォーム。ファイルが選択され、アップロードボタンがある

インテグレーションAPI 経由でアセットが登録され、CMS の Asset 画面に表示されます。

インテグレーションAPI からアセットを登録した後の Asset 画面。アップロードしたファイルが一覧に表示されている

エンドポイントの詳細な仕様については、インテグレーションAPIリファレンスを参照してください。