Handling File Upload

If you need to handle the file upload in the server part, please follow the related documentation.


This documentation assumes you have a /media_objects endpoint accepting multipart/form-data-encoded data.

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

To manage the upload in the admin part, you need to customize the create form or the edit form.


Add a FileInput as a child of the guesser. For example, for the create form:

ゲッサーの子として FileInput を追加します。たとえば、作成フォームの場合:

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

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

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

And that's it! The guessers are able to detect that you have used a FileInput and are passing this information to the data provider, through a hasFileField field in the extraInformation object, itself in the data. If you are using the Hydra data provider, it uses a multipart/form-data request instead of a JSON-LD one. In the case of the EditGuesser, the HTTP method used also becomes a POST instead of a PUT, to prevent a PHP bug.

それだけです!ゲッサーは、FileInput を使用したことを検出し、データ内の extraInformation オブジェクト自体の hasFileField フィールドを介して、この情報をデータ プロバイダーに渡します。Hydra データ プロバイダーを使用している場合は、 JSON-LD の代わりに multipart/form-data リクエストを使用します。EditGuesser の場合、使用される HTTP メソッドも PUT ではなく POST になり、PHP のバグを防ぎます。