logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
09/04/2025, by Ivan

ファイルのアップロードがサポートされました。詳細についてはリリースノートを参照してください: https://www.drupal.org/node/3024331

次の2つの画像は、Postmanを使用してJSON:APIによるファイルアップロードをテストする方法を示しています。

Json API File header
Json:API headers in Postman.

ユーザー画像をアップロードするためのcurlの例

別のリクエストで認証済みであり、CSRFトークンを取得済みであることを前提としています。

curl -s -X POST -b cookie.txt \
  --header "Accept: application/vnd.api+json" \
  --header "Content-Type: application/octet-stream" \
  --header "X-CSRF-Token: $TOKEN" \
  --header 'Content-Disposition: file; filename="test.jpg"' \
  --data-binary "@test.jpg" \
  http://localhost/jsonapi/user/user/$UUID/user_picture

axios(または他のHTTPクライアントライブラリ)とNode.jsを使用する際のヒント:

投稿する必要がある画像のデータ形式がBuffer形式であることに気付くかもしれません。たとえば:

<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff fe 00 3e 43 52 45 41 54 4f 52 3a 20 67 64 2d 6a 70 65 67 20 76 31 2e 30 20 28 75 73 69 ... 582549 more bytes>

 これは技術的にはバイナリ画像データのBufferオブジェクト表現ですが、お気に入りのHTTPクライアントライブラリ(axiosなど)でこれをDrupalにdataパラメーターとして送信しようとすると、正しくないファイルが作成されてしまいます。ファイルは作成され、成功のレスポンスが返ってくるでしょう。しかし、その画像はおそらく黒い背景に白い四角だけのものになるでしょう。

これを実際のバイナリBuffer出力に変換するには、Node.jsのBufferクラスを使用する必要があります。具体的には、fromメソッドを使用します。

たとえば:

AWS S3 SDKを使用してファイルオブジェクトを取得し、そのファイルオブジェクトのBodyを取得したとしましょう。そのBodyには上記のようなBufferデータが含まれています。そのBodyデータを変数に入れ、Bufferクラスを使用して正しい形式に変換し、axiosを使用してDrupalのJSON:APIエンドポイントに送信しましょう(注:このスニペットはコード全体ではなく重要な部分だけです。また、DRYを保つために、通常はこれらすべてをいくつかのヘルパーライブラリに分割しています)。重要な行はdata: Buffer.from(buffer, "binary")です。

const buffer = storedFile.Body; // contains the buffer data indicated above.

const drupalData = await axios({
  method: "post",
  url: url, //URL to /jsonapi/media/image/field_media_image/ on your site.
  auth: {
  	username: xxx
  	password: xxx
  },
  headers: {
    'Accept': 'application/vnd.api+json',
    'Content-Type': 'application/octet-stream',
    'X-CSRF-Token': token, // You will need to retrieve this from Drupal first from /session/token!
    'Content-Disposition': 'file; filename="' + filename + '"',
  },
  data: Buffer.from(buffer, "binary"),

});

console.log(drupalData); // the uuid if the newly created file is contained in drupalData.data.id

 これは、Node.jsのAWS Lambda関数を使用して、Drupalに投稿するためにS3からファイルを取得している場合に特に役立ちます。