Skip to content

FileDrop

A drop zone for file uploads: the whole well is a native file input, so click and drag-and-drop work without JavaScript.

FormsIsland

Examples

In a field

The Field supplies the label, hint and error. After hydration the zone lists the chosen files.

Drop SKILL.md and its filesOr click to choose.

SKILL.md, plus any files it references.

Example
<Field id="skill-files" label="Skill files" hint="SKILL.md, plus any files it references.">
  <FileDrop name="files" multiple accept=".md,.txt,.json,.py,.sh" title="Drop SKILL.md and its files" hint="Or click to choose." />
</Field>

Invalid

A Field error turns the ring red and sets aria-invalid on the input.

Drop SKILL.md and its files

Add a SKILL.md file.

Example
<Field id="skill-files" label="Skill files" error="Add a SKILL.md file.">
  <FileDrop name="files" multiple title="Drop SKILL.md and its files" />
</Field>

Usage

Usage
import { FileDrop } from '@switchboard/ui'

<form method="post" encType="multipart/form-data">
  <Field id="skill-files" label="Skill files">
    <FileDrop name="files" multiple title="Drop SKILL.md and its files" />
  </Field>
</form>

Props

Every component also takes mix, for css() and mixins applied after its own style.

FileDrop

FileDrop props
PropTypeDefaultDescription
name*string–Form field name of the file input.
multipleboolean–Allow choosing several files. Read them with formData.getAll(name).
acceptstring–File types the picker offers (".md,.txt"). A hint only: check on the server.
titlestring–Main line in the zone. Names the input when there is no Field.
hintstring–Second line in the zone.
iconIconName'upload'Icon above the title.
requiredboolean–Native required validation.
disabledboolean–Dims the zone and blocks the picker.
invalidboolean–Error state. Inside a Field it follows the Field error.
idstring–Input id. Inside a Field it comes from the Field.

Island. Takes only these props. The form needs encType="multipart/form-data".

Accessibility

  • The zone is a real <input type="file"> stretched over the well, so it is one tab stop and opens the picker with Enter or Space.
  • Focus shows the ring on the whole zone; an error sets aria-invalid and the Field links the message with aria-describedby.
  • The chosen files are listed in a polite live region after hydration.

Guidance

Do

  • Say which files the server expects in the title or hint.
  • Validate types and sizes on the server and show the error in the Field.

Don’t

  • Rely on accept for validation.
  • Put a FileDrop in a form without encType="multipart/form-data".