Api Platform conference
Register now
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

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! 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.

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop