Forms

File drop

Takes files by dragging them in, pasting them or choosing them, and says plainly when one can't be used, even before it's dropped.

Installation

npx sinaui add file-drop

Copy src/lib/ui/FileDrop.svelte, announce.ts, Icon.svelte and tokens.css. No other dependencies.

Examples

Several images

Pictures show a preview. Hold files over the box: it says whether they'll be taken before you let go. Files of the wrong type, too large, or over the limit are turned away with the reason.

Manuscript scans

Drag files here, or choose files

Images up to 5 MB, four at most.

<script lang="ts">
	import FileDrop from '#lib/ui/FileDrop.svelte';

	let scans = $state<File[]>([]);
</script>

<FileDrop
	label="Manuscript scans"
	bind:value={scans}
	accept="image/*"
	multiple
	maxFiles={4}
	maxSize={5_000_000}
	hint="Images up to 5 MB, four at most."
	name="scans"
/>

One file

Without multiple, a new file replaces the old one.

Catalog

Drag a file here, or choose a file

One PDF. Choosing another replaces it.

<script lang="ts">
	import FileDrop from '#lib/ui/FileDrop.svelte';

	let catalog = $state<File[]>([]);
</script>

<FileDrop
	label="Catalog"
	bind:value={catalog}
	accept=".pdf"
	hint="One PDF. Choosing another replaces it."
/>

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`File[]`, bindable	`[]`
`accept`	`string`, e.g. `'.pdf,image/*'`	any
`multiple`	`boolean`	`false`
`maxSize`	`number` (bytes)
`maxFiles`	`number`
`name`	`string`
`hint`	`string`
`disabled`	`boolean`	`false`

The chosen files stay in a real file input, so a plain form submit sends them.

Accessibility

Dragging is a shortcut: the “choose” link opens the file picker by keyboard, touch or screen reader. With a pointer, pressing anywhere on the box does the same.
Files can be pasted too, once the box has focus.
Screen readers hear how many files were added, and why any were turned away.
Each file in the list has its own remove button, named after the file.