The FileInput component allows users to select files through drag-and-drop or a file browser.
It is fully accessible, supports multiple files, and can restrict accepted file types.

• Drag-and-drop support: Users can drop files onto the component.
• Multiple files: Select or drop more than one file at a time.
• File type restrictions: Accept only certain types (images, PDFs, etc.) using the accept prop.
• Customizable UI: You can embed icons, text, buttons, or any interactive element.
• Reactive binding: Selected files can be tracked via state.

Usage Example

Preview

Drag and Drop

or

Browse file

Code

<script lang="ts">
  import { Button, FileInput } from "@fefade-ui/svelte"

  let filesData: File[] = $state([])

  async function handleChange(files: File[]) {
    filesData = [...filesData, ...files]
  }
</script>

<FileInput multiple accept="image/*,.pdf" onDropEvent={handleChange}>
  <div
    style="
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        "
  >
    <svg
      viewBox="0 0 640 512"
      height="50px"
      width="50px"
      fill="rgb(82, 82, 82)"
    >
      <path
        d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"
      >
      </path>
    </svg>
    <p>Drag and Drop</p>
    <p>or</p>
    <Button variant="outlined">Browse file</Button>
  </div>
</FileInput>

<br />
{#each filesData as file (file)}
  <p>{file.name}</p>
{/each}

Prop

Prop / Slot	Type	Default	Description
multiple	boolean	false	Allows selecting multiple files.
accept	string	""	Comma-separated list of allowed file types (e.g., "image/*,.pdf").
onDropEvent	function	undefined	Callback triggered when files are selected or dropped. Receives the File[].
children	Optional	Custom UI inside the FileInput (icons, text, buttons).

Best Practices

• Use file type restrictions to prevent invalid uploads.
• Provide visual feedback when files are dropped or selected.
• Keep the UI simple and accessible, especially for drag-and-drop zones.
• Combine with form validation to handle required files.
• Use state tracking for managing multiple files efficiently.