File picker

EuiFilePicker is a stylized, but generic HTML

<input type="file"> tag. It supports drag and drop as well as on click style selection of files. The example below shows how to grab the files using the FileList API. Like other form elements, you can wrap it in an EuiFormRow to apply a label.

Loading...

Removing files programmatically

The current file selection can be cleared programmatically by calling the removeFiles method, which can be accessed on a component instance via React ref: filePickerRef.current.removeFiles().

Loading...

Props

EuiFilePicker

Extends InputHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop disabled# ↦	Description and type Type: boolean ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop id# ↦	Description and type Type: string ↦	Default value ↵
Prop name# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop fullWidth# ↦	Description and type Expand to fill 100% of the parent. Defaults to fullWidth prop of <EuiForm>. Type: boolean ↦	Default value false ↵
Prop isLoading# ↦	Description and type Type: boolean ↦	Default value ↵
Prop aria-label# ↦	Description and type Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop onChange# ↦	Description and type Use as a callback to access the HTML FileList API Type: (files: FileList) => void ↦	Default value ↵
Prop display# ↦	Description and type Size or type of display; default for normal height, similar to other controls; large for taller size Type: "default" | "large" ↦	Default value large ↵
Prop compressed# ↦	Description and type Reduces the size to a typical (compressed) input Type: boolean ↦	Default value false ↵
Prop isInvalid# ↦	Description and type Type: boolean ↦	Default value ↵
Prop initialPromptText# ↦	Description and type The content that appears in the dropzone if no file is attached Type: ReactNode ↦	Default value 'Select or drag and drop a file' ↵
Prop ref# ↦	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: LegacyRef<unknown> ↦	Default value ↵

𐘂𐘂