FormFileUpload

FormFileUpload allows users to select files from their local device.

View on Storybook

View source on GitHub

Import

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

Props

NameTypeDefaultRequiredDescription
multipleunknownfalse

Examples

Default

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

Restrict File Types

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

Allow Multiple Files

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

With Icon

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

With Custom Render

Render a custom trigger button by passing a render function to the render prop. jsx ( { openFileDialog } ) => <button onClick={ openFileDialog }>Custom Upload Button</button>

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