REST API: ファイルのアップロード

メディアライブラリ は、Strapi のバックエンドで upload パッケージによって動作します。ファイルをアップロードするには、管理画面のメディアライブラリを使うか、REST API の次のエンドポイントを使います。

メソッド	パス	説明
GET	/api/upload/files	ファイル一覧を取得
GET	/api/upload/files/:id	特定のファイルを取得
POST	/api/upload	ファイルをアップロード
POST	/api/upload?id=x	fileInfo を更新
DELETE	/api/upload/files/:id	ファイルを削除

メモ

• フォルダ は管理画面専用で、Content API（REST / GraphQL）には含まれません。REST でアップロードしたファイルは、自動で作成される「API Uploads」フォルダに置かれます。
• GraphQL API ではメディアのアップロードに対応していません。アップロードは REST API を使うか、管理画面の メディアライブラリ から行ってください。アップロード済みメディアの更新・削除用の GraphQL ミューテーションは利用できます（詳しくは GraphQL API のドキュメント を参照）。

ファイルをアップロード

1 件または複数のファイルをアプリケーションにアップロードします。

受け付けるパラメータは files のみで、アップロードするファイルを表します。値は Buffer または Stream にできます。

Tip

画像をアップロードするときは、fileInfo オブジェクトでファイル名、代替テキスト、キャプションを指定できます。

ブラウザ

<form>
  <!-- Can be multiple files -->
  <input type="file" name="files" />
  <input
    type="hidden"
    name="fileInfo"
    value='{"name":"homepage-hero","alternativeText":"Person smiling while
      holding laptop","caption":"Hero image used on the homepage"}'
  />
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
  const form = document.querySelector('form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    await fetch('/api/upload', {
      method: 'post',
      body: new FormData(e.target)
    });
  });
</script>

Node.js

import { FormData } from 'formdata-node';
import fetch, { blobFrom } from 'node-fetch';

const file = await blobFrom('./1.png', 'image/png');
const form = new FormData();

form.append('files', file, "1.png");
form.append(
  'fileInfo',
  JSON.stringify({
    name: 'Homepage hero',
    alternativeText: 'Person smiling while holding laptop',
    caption: 'Hero image used on the homepage',
  })
);

const response = await fetch('http://localhost:1337/api/upload', {
  method: 'post',
  body: form,
});

Caution

リクエストボディには FormData を送る必要があります。

エントリに紐づくファイルをアップロード

特定のエントリにリンクされる 1 件または複数のファイルをアップロードします。

利用できるパラメータは次のとおりです。

パラメータ	説明
files	アップロードするファイル。値は Buffer または Stream にできます。
path（任意）	ファイルを置くフォルダ（strapi-provider-upload-aws-s3 のみサポート）。
refId	ファイルを紐づけるエントリの ID。
ref	ファイルを紐づけるモデルの一意 ID（uid）。詳しくは下記。
source（任意）	モデルが属するプラグイン名。
field	ファイルを紐づけるエントリ上のフィールド名。

例として、Restaurant モデルの属性が次のとき:

/src/api/restaurant/content-types/restaurant/schema.json

{
  // ...
  "attributes": {
    "name": {
      "type": "string"
    },
    "cover": {
      "type": "media",
      "multiple": false,
    }
  }
// ...
}

対応するフロントエンドの例:

<form>
  <!-- Can be multiple files if you setup "collection" instead of "model" -->
  <input type="file" name="files" />
  <input type="text" name="ref" value="api::restaurant.restaurant" />
  <input type="text" name="refId" value="5c126648c7415f0c0ef1bccd" />
  <input type="text" name="field" value="cover" />
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
  const form = document.querySelector('form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    await fetch('/api/upload', {
      method: 'post',
      body: new FormData(e.target)
    });
  });
</script>

Caution

リクエストボディには FormData を送る必要があります。

fileInfo を更新

アプリケーション内のファイル情報を更新します。

受け付けるパラメータは fileInfo のみで、更新する内容を表します。

import { FormData } from 'formdata-node';
import fetch from 'node-fetch';

const fileId = 50;
const newFileData = {
  alternativeText: 'My new alternative text for this image!',
};

const form = new FormData();

form.append('fileInfo', JSON.stringify(newFileData));

const response = await fetch(`http://localhost:1337/api/upload?id=${fileId}`, {
  method: 'post',
  body: form,
});

モデル定義

モデル（または別プラグインのモデル）にファイル属性を追加するのは、新しい関連付けを追加するのと同様です。

次の例では、avatar に 1 ファイルをアップロードして紐づけます。

/src/api/restaurant/content-types/restaurant/schema.json

{
  // ...
  {
    "attributes": {
      "pseudo": {
        "type": "string",
        "required": true
      },
      "email": {
        "type": "email",
        "required": true,
        "unique": true
      },
      "avatar": {
        "type": "media",
        "multiple": false,
      }
    }
  }
  // ...
}

次の例では、restaurant コンテンツタイプに複数画像をアップロードして紐づけます。

/src/api/restaurant/content-types/restaurant/schema.json

{
  // ...
  {
    "attributes": {
      "name": {
        "type": "string",
        "required": true
      },
      "covers": {
        "type": "media",
        "multiple": true,
      }
    }
  }
  // ...
}