File Upload

A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragging operations.

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/file-upload.json

Props

FileUpload

Prop	Type	Default	Description
`onFilesAdded`	`(files: File[]) => void`	`-`	Called after the user selects or drops files.
`children`	`Snippet`	`-`	Upload trigger, content overlay, and surrounding UI.
`multiple`	`boolean`	`true`	Allow selecting more than one file.
`accept`	`string`	`-`	Accepted file types, for example `".png,.pdf"`.
`disabled`	`boolean`	`false`	Disable drag-and-drop handling and file input activation.

FileUploadTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the trigger behavior on a wrapper element instead of a native button.
`children`	`Snippet`	`-`	Trigger label, icon, or custom button content.
`class`	`string`	`-`	Additional CSS classes for the trigger wrapper or button.
`onclick`	`(event: MouseEvent) => void`	`-`	Optional click handler called after the file input is opened.

FileUploadContent

Prop	Type	Default	Description
`children`	`Snippet`	`-`	Overlay content shown while files are being dragged over the window.
`class`	`string`	`-`	Additional CSS classes for the drag overlay.