📦 svelte-dropzone-runes

A lightweight, flexible, and fully-typed file dropzone component for Svelte 5, built with performance and customization in mind. Easily handle drag-and-drop or manual file selection with support for validation, custom rendering, and accessibility.

✨ Features

✅ Svelte 5-compatible (uses $props() and $state)

📁 Drag & drop or click to select files

🔎 File validation:

Accepts specific types

Min/max file size

Supports single/multiple files

🎨 Full custom UI rendering

🧩 Integration-friendly via rich event callbacks

🚫 Automatically prevents document-level drops (optional)

📦 Installation

``
npm install svelte-dropzone-runes
`

🛠 Props

| Prop | Type | Default | Description |
|-----------------------------|---------------------------------------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------------|
| accept | string[] | undefined | Accepted MIME types or file extensions (e.g., ['image/jpeg']). |
| disabled | boolean | false | Disables all interactions with the dropzone. |
| maxSize | number | Infinity | Maximum file size (in bytes). |
| minSize | number | 0 | Minimum file size (in bytes). |
| multiple | boolean | false | Allows multiple files to be selected at once. If set false only the first file will be accepted. |
| maxFileCountPerUpload | number | Infinity | Maximum number of files that can be uploaded at once. Requires multiple to be true. |
| preventDropOnDocument | boolean | true | Prevents default drag-and-drop behavior on the entire document. |
| disableDropzoneClick | boolean | false | Disables the ability to open the file dialog by clicking on the dropzone. |
| disableDropzoneKeydown | boolean | false | Disables the ability to open the file dialog by pressing keys. |
| disableDropzoneDrag | boolean | false | Disables drag-and-drop functionality. |
| name | string | '' | The name of the input, required when used inside a form. |
| id | string | undefined | The id of the input. |
| required | boolean | false | Marks the input as required. |
| dropzoneElement | HTMLElement | undefined | A custom dropzone HTML element. You can bind dropzone events to any element by passing it here. |
| inputElement | HTMLInputElement | undefined | Used to access input element used inside svelte-dropzone-runes. |
| CustomDropzone | Snippet<[CustomDropzoneProps]> | undefined | Function that renders a custom dropzone element. Use with dropzoneElement to bind dropzone events to the custom element. |
| children | Snippet<[]> | undefined | Custom inner content (overrides the default message). |




🎯 Events

| Event | Types | Payload | Description |
|-----------------------------|-----------------------------------------------|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
| onDragenter | DropzoneEventHandler | {acceptedFiles,fileRejections,event} | Callback when a drag event enters the dropzone area. |
| onDragover | DropzoneEventHandler | {acceptedFiles,fileRejections,event} | Callback when a file is dragged over the dropzone. |
| onDragleave | DropzoneEventHandler | {acceptedFiles,fileRejections,event} | Callback when a file leaves the dropzone area. |
| onDrop | DropzoneEventHandler | {acceptedFiles,fileRejections,event} | Callback when files are dropped onto the dropzone. |
| onFileDialogCancel | () => void | | Callback when the file dialog is canceled. |

🚀 Usage


Basic Example
`svelte

`

Custom UI

`svelte


{#snippet CustomDropzone(props: CustomDropzoneProps)}


{/snippet}

`

Full Page

`svelte


{#if isDraggingOver}