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