FormFileUpload

FormFileUpload allows users to select files from their local device.

import { FormFileUpload } from '@wordpress/components';

LinksPermalink to this section

Name	Default	Description
`__next40pxDefaultSize`		`boolean` Start opting into the larger default height that will become the default size in a future version.
`accept`		`string` A string passed to the `input` element that tells the browser which file types can be uploaded by the user. e.g: `image/,video/`.
`children`		`ReactNode` Children are passed as children of `Button`.
`icon`		`IconType \| null \| undefined` The icon to render in the default button. See the `Icon` component docs for more information.
`multiple`	`false`	`boolean` Whether to allow multiple selection of files or not.
`onChange` Required		`ChangeEventHandler<HTMLInputElement> \| undefined` Callback function passed directly to the `input` file element. Select files will be available in `event.currentTarget.files`.
`onClick`		`MouseEventHandler<HTMLInputElement>` Callback function passed directly to the `input` file element. This can be useful when you want to force a `change` event to fire when the user chooses the same file again. To do this, set the target value to an empty string in the `onClick` function.
`render`		`(arg: { openFileDialog: () => void; }) => ReactNode` Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.

const Default = ( props ) => {
	return <FormFileUpload { ...props } />;
};

const RestrictFileTypes = ( props ) => {
	return <FormFileUpload { ...props } />;
};

const AllowMultipleFiles = ( props ) => {
	return <FormFileUpload { ...props } />;
};

const WithIcon = ( props ) => {
	return <FormFileUpload { ...props } />;
};

Render a custom trigger button by passing a render function to the render prop.

( { openFileDialog } ) => <button onClick={ openFileDialog }>Custom Upload Button</button>

const WithCustomRender = ( props ) => {
	return <FormFileUpload { ...props } />;
};