FormFileUpload Edit

FormFileUpload is a component that allows users to select files from their local device.

Usage

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

const MyFormFileUpload = () => (
    <FormFileUpload
        accept="image/*"
        onChange={ ( event ) => console.log( event.currentTarget.files ) }
    >
        Upload
    </FormFileUpload>
);

Top ↑

Props

The component accepts the following props. Props not included in this set will be passed to the Button component.

Top ↑

accept

A string passed to input element that tells the browser which file types can be upload to the upload by the user use. e.g: image/*,video/*.
More information about this string is available in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers.

  • Type: String
  • Required: No

Top ↑

children

Children are passed as children of Button.

  • Type: Boolean
  • Required: No

Top ↑

icon

The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and null.

  • Type: String|Function|WPComponent|null
  • Required: No
  • Default: null

Top ↑

multiple

Whether to allow multiple selection of files or not.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

onChange

Callback function passed directly to the input file element.

Select files will be available in event.currentTarget.files.

  • Type: Function
  • Required: Yes

Top ↑

onClick

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.

<FormFileUpload
    onClick={ ( event ) => ( event.target.value = '' ) }
    onChange={ onChange }
>
    Upload
</FormFileUpload>
  • Type: Function
  • Required: No

Top ↑

render

Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.

This function receives an object with the property openFileDialog. The property is a function that when called opens the browser window to upload files.

  • Type: Function
  • Required: No