Skip to main content

FilePicker

File picker.

Props​

  • name (string): name HTML attribute to set to the element.
  • [OPTIONAL] id (string): id HTML attribute to set to the element.
  • [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "".
  • [OPTIONAL] helper (string): Element helper. Supports light markdown.
  • [OPTIONAL] label (string): Element label. Supports light markdown.
  • [OPTIONAL] placeholder (string): Element placeholder.
  • [OPTIONAL] accept (string): accept HTML attribute to set to the element.
  • [OPTIONAL] multiple (string): multiple HTML attribute to set to the element. Defaults to false.
  • [OPTIONAL] iconPosition ("left" | "right"): Position of the icon relatively to the label. Defaults to "left".
  • [OPTIONAL] icon (string): Name of the icon to set to the element.
  • [OPTIONAL] value (File | File[]): File picker value. Updating this prop with a new value will replace the current value by the one passed.
  • [OPTIONAL] disabled (boolean): When element is disabled, a special disabled modifier is automatically added, and all its user interactions are disabled. Defaults to false.

Events​

  • change (newValue: File[], event: InputEvent) => void: Triggered whenever input value is modified.
  • focus (currentValue: File[], event: FocusEvent) => void: Triggered whenever the input is focused.
  • blur (currentValue: File[], event: FocusEvent) => void: Triggered whenever the input is blurred.

Syntax​

<UIFilePicker
  id="my-id"
  modifiers="large"
  name="test"
  accept="image/*"
  placeholder="Select a file..."
  onChange={onChange}
  onFocus={onFocus}
  onBlur={onBLur}
/>

Syntax - with label and helper​

<UIFilePicker
  name="test"
  label="Label"
  helper="Helper"
/>

Syntax - multiple​

<UIFilePicker
  name="test"
  multiple
/>

Syntax - disabled​

<UIFilePicker
  name="test"
  disabled
/>

Syntax - with right icon​

<UIFilePicker
  name="test"
  icon="star"
  iconPosition="right"
/>