Components
FileUpload
A file picker and drop zone with file type and size checks and a removable file list.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: fileUpload,fileUploadDropzone,fileUploadError,fileUploadHint,fileUploadItem,fileUploadList,fileUploadRemove.
| Prop | Type | Default | Description |
|---|---|---|---|
accept | string | '' | See usage notes and the component API. |
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
disabled | boolean | false | See usage notes and the component API. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
files | File[] | $bindable([]) | See usage notes and the component API. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
label | string | 'Upload files' | See usage notes and the component API. |
maxSize | number | Infinity | See usage notes and the component API. |
multiple | boolean | false | See usage notes and the component API. |
name | string | undefined | undefined | See usage notes and the component API. |
onError | ((message: string) => void) | undefined | undefined | See usage notes and the component API. |
onFilesChange | ((files: File[]) => void) | undefined | undefined | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
required | boolean | false | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import FileUpload from sveltewind/components. This example shows its default styling in a usable context.
Drag files here or choose them from your device.
Loading...This component selects files; your application sends them to a server. maxSize is in bytes. accept filters dropped files as well as picker choices. Client checks do not replace server validation. name enables native form submission.
Examples
Theme variants
Every variant available for FileUpload in the built-in themes is shown below.
compact — Apply the compact variant.
Drag files here or choose them from your device.
Loading...comfortable — Apply the comfortable variant.
Drag files here or choose them from your device.
Loading...full — Apply the full variant.
Drag files here or choose them from your device.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Drag files here or choose them from your device.
Loading...Props and behavior
Change multiple, accept, maxSize while retaining the default component styling.
Drag files here or choose them from your device.
Loading...Content and values
Provide different label values.
Drag files here or choose them from your device.
Loading...