Zentauri UI
Forms

Drag-and-drop file uploads

FileUpload wraps a visually hidden file input with a large hit target. Drag files over the surface to highlight the active state, or activate the native picker with keyboard and pointer.

Custom label

File upload code examples

Use Show output / Show code on each row. Snippets start with a Variant line naming the appearance.

Scenario: DEFAULT COPY · IMAGE ACCEPT

Scenario: ACTIVE STATE

Scenario: DISABLED

Scenario: ERROR STATE

Scenario: SUCCESS STATE

Scenario: WARNING STATE

Scenario: INFO STATE

Scenario: NEUTRAL STATE

Scenario: PURPLE STATE

Scenario: INDIGO STATE

Scenario: EMERALD STATE

Scenario: AMBER STATE

Scenario: PINK STATE

Scenario: ORANGE STATE

Scenario: TEAL STATE

Overview

The component clears the native input value after each selection so selecting the same file twice still emits callbacks. Use accept and multiple to mirror platform constraints.

Common use cases

  • CSV and media imports in admin tools.
  • Profile and cover photo pickers.
  • Attachment surfaces on support forms.
  • Bulk asset ingestion during migrations.

FAQ

How do I handle selected files?

Use the onFiles callback to receive a File array. You can also listen to onChange for the underlying input event when integrating with form libraries.

Can I customize the inner content?

Yes. Pass children to replace the default helper copy while keeping the same focusable label wiring to the hidden input.