API Platform Con 2021: join us in Lille (France) or online on September 10 for our 1st international conference.
API Platform Con 2021: join us in Lille (France) or online on September 10 for our 1st international conference.
API Platform Con 2021: join us in Lille (France) or online on September 10 for our 1st international conference.

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.

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:

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>
);

And that's it! You don't need to decorate the data provider if you are using the Hydra one: it detects that you have used a FileInput and uses a multipart/form-data request instead of a JSON-LD one.