API Platform Adminでのファイルアップロード

PHPではPUTでファイルアップロードができないというバグがあるせいで、色々対処しなければならいことはAPI Platformでファイルアップロードで記事にした。

React AdminのベースのAPI Platform Adminはその問題に対処してくれている。

フォームパーツにFileInputを使用している場合、react adminのuseCreateやuseUpdate時にextraInformationのhasFileFieldオプションをONにしてくれるので、PUTからPOSTにメソッドが置き換わり、ヘッダもmultipart/form-dataにしてくれるよう。ImageInputの場合はやってくれなかったので、問題の原因がわからず苦労しました。

以下はAPI Platform Adminでの該当記事の翻訳です。

Handling File Upload

サーバー部分でファイルのアップロードを処理する必要がある場合は、関連ドキュメントに従ってください。

このドキュメントでは、multipart/form-data-encoded データを受け入れる /media_objects エンドポイントがあることを前提としています。

管理部分でアップロードを管理するには、作成フォームまたは編集フォームをカスタマイズする必要があります。 ゲッサーの子として FileInput を追加します。たとえば、作成フォームの場合:

import {
  HydraAdmin,
  ResourceGuesser,
  CreateGuesser,
} from "@api-platform/admin";
import { FileField, FileInput } from "react-admin";

const MediaObjectsCreate = props => (
  <CreateGuesser {...props}>
    <FileInput source="file">
      <FileField source="src" title="title" />
    </FileInput>
  </CreateGuesser>
);

export default () => (
  <HydraAdmin entrypoint="https://demo.api-platform.com">
    <ResourceGuesser name="media_objects" create={MediaObjectsCreate} />
    {/* ... */}
  </HydraAdmin>
);

以上です！Guesserは、FileInput を使用したことを検出し、データ内の extraInformation オブジェクト自体の hasFileField フィールドを通じて、この情報をデータ プロバイダーに渡します。 Hydra データ プロバイダーを使用している場合、JSON-LD の代わりに multipart/form-data 要求が使用されます。 EditGuesser の場合、PHP のバグを防ぐために、使用される HTTP メソッドも PUT ではなく POST になります。