FileDrop

Files, dropped on or chosen from a real file input.

Import it from rei-kit: import { FileDrop } from 'rei-kit'

Open FileDrop in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { FileDrop } from 'rei-kit'

const files = ref<File[]>([])
</script>

<template>
  <FileDrop
    v-model="files"
    label="Drop a receipt here"
    hint="PDF or an image, up to 5 MB"
    browse-label="Browse"
    remove-label="Remove"
    too-large-label="That file is over 5 MB"
    accept="image/*,.pdf"
    :max-size="5 * 1024 * 1024"
    multiple
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes	The instruction in the box: "Drop a receipt here". Already translated.
`hint`	`string`	''	A line under it: what is accepted, how big.
`browseLabel`	`string`	yes	The button inside the box, e.g. "Browse".
`removeLabel`	`string`	yes	Accessible name of each file's remove button.
`accept`	`string`	undefined	Passed to the input: `image/*`, `.pdf`.
`multiple`	`boolean`	false
`maxSize`	`number`	undefined	In bytes. Anything larger is refused and reported through `rejected`.
`tooLargeLabel`	`string`	undefined	Shown under the box when a file was too large.
`disabled`	`boolean`	false

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub