File Input @astryx-svelte/core v0.3.0 · FileInput
Usage
FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, and count. Pair with validation status for upload feedback.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Always specify an accept prop to guide users toward valid file types. |
| Do | Use maxSize and maxFiles to prevent oversized uploads; the component handles validation and error display automatically. |
| Do | Add a description to communicate constraints like file size limits or accepted formats. |
| Do | Use changeAction for immediate upload workflows that benefit from optimistic UI. |
| Don't | Don't use FileInput for directory or folder uploads; that is not supported in v1. |
| Don't | Don't avoid dropzone mode unless space is constrained; drag-and-drop is the expected interaction for file uploads. |
| Don't | Don't wrap a disabled FileInput in Tooltip to explain why it's disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.FileInput — Basic
A controlled single-file upload with accepted types, a size limit, and helper text. Use for standard document upload fields in forms.