The FileControls
component allows for selecting a resource from the media library.
Depending on a file having been selected, it will render a toolbar group with one or two buttons inside.
This means that the component is intended to be used inside BlockControls
.
FileControls component. |
FileControls component showing Deselect button. |
For a minimum working setup, all you need to do is pass a media ID as value
to FileControls
, as well as an onChange
callback that accepts a media object.
import { FileControls } from '@humanmade/block-editor-components';
import { BlockControls } from '@wordpress/block-editor';
function BlockEdit( props ) {
const { attributes, setAttributes } = props;
const { file } = attributes;
return (
<BlockControls>
<FileControls
value={ file }
onChange={ ( file ) => setAttributes( { file: file?.id, url: file?.url } ) }
/>
</BlockControls>
);
}
Additionally, you can pass anything as props that the nested MediaUpload
component accepts, except for multiple
and render
, which will be taken care of by FileControls
.
import { FileControls } from '@humanmade/block-editor-components';
import { BlockControls } from '@wordpress/block-editor';
function BlockEdit( props ) {
const { attributes, setAttributes } = props;
const { file } = attributes;
return (
<BlockControls>
<FileControls
alowedTypes={ [ 'image' ] }
title="Select or Upload Image"
value={ file }
onChange={ ( file ) => setAttributes( { file: file?.id, url: file?.url } ) }
/>
</BlockControls>
);
}
Please note that the FileControls
component returns null
if a previously selected file has been deselected.
The FileControls
component does not have any custom props other than value
and onChange
, but you can pass anything that is supported by the nested MediaUpload
component, except for multiple
and render
.
The callback to use for handling selecting and deselecting a file.
Please note that onChange
will receive a full media object from MediaUpload
, and null
if a previously selected file has been deselected.
Type | Required | Default |
---|---|---|
Function |
yes | undefined |
The ID of the selected file, if any.
Type | Required | Default |
---|---|---|
number |
yes | undefined |
The FileControls
component requires the following dependencies, which are expected to be available:
@wordpress/block-editor
@wordpress/components
@wordpress/i18n