svelte-dropzone-runes

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #golang #go #android #rust #deep-learning #linux #docker #cli #mcp #openai

svelte-dropzone-runes

(★ 9)

Svelte component for fileupload and file dropzone. Compatible with Svelte 5 Runes

svelte-dropzone-runes 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 📦 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<DataTransferItem>`      | {acceptedFiles,fileRejections,event}             | Callback when a drag event enters the dropzone area.                                                                                   |
| `onDragover`                | `DropzoneEventHandler<DataTransferItem>`      | {acceptedFiles,fileRejections,event}             | Callback when a file is dragged over the dropzone.                                                                                     |
| `onDragleave`               | `DropzoneEventHandler<DataTransferItem>`      | {acceptedFiles,fileRejections,event}             | Callback when a file leaves the dropzone area.                                                                                         |
| `onDrop`                    | `DropzoneEventHandler<File>`                  | {acceptedFiles,fileRejections,event}             | Callback when files are dropped onto the dropzone.                                                                                     |
| `onFileDialogCancel`        | `() => void`                                  |                                                  | Callback when the file dialog is canceled.                                                                                             |

## 🚀 Usage
Basic Example
```svelte

let files = $state({
		acceptedFiles: [] as File[],
		rejectedFiles: [] as RejectedFile<File>[]
	});

function handleFilesSelect(e: DropzoneEvent<File>) {
		files = e;
	}
</script>

```

Custom UI

```svelte
<script lang="ts">
	import type { CustomDropzoneProps, DropzoneEvent,RejectedFile } from 'svelte-dropzone-runes';
	import Dropzone from 'svelte-dropzone-runes';
	let dropzoneElement: HTMLElement | undefined = $state();
	let files = $state({
		acceptedFiles: [] as File[],
		rejectedFiles: [] as RejectedFile<File>[]
	});

function handleFilesSelect(e: DropzoneEvent<File>) {
		files = e;
		isDraggingOver = false;
	}
</script>

{#snippet CustomDropzone(props: CustomDropzoneProps)}
	<div bind:this={dropzoneElement} {...props}>Custom Dropzone</div>
{/snippet}

```

Full Page

```svelte
<script lang="ts">
	import { browser } from '$app/environment';
	import type { DropzoneEvent } from 'svelte-dropzone-runes';
	import Dropzone from 'svelte-dropzone-runes';
	let dropzoneElement: HTMLElement | undefined = $state(
		browser ? document.documentElement : undefined
	);
	let files = $state({
		acceptedFiles: [] as File[],
		rejectedFiles: [] as RejectedFile<File>[]
	});
	let isDraggingOver = $state(false);

function handleFilesSelect(e: DropzoneEvent<File>) {
		files = e;
		isDraggingOver = false;
	}
</script>

{#if isDraggingOver}
	<div style="width: 100dvw;height:100dvh;position:fixed;left:0%;top:0%;background:white;display:flex;justify-content:center;align-items:center" >
		<div
			style="width:calc(100% - 100px);height:calc(100% - 100px);display:flex;justify-content:center;align-items:center;margin:50px;"
		>
			Drop Here
		</div>
	</div>
{/if}

<Dropzone
	onDragenter={(e) => {
		isDraggingOver = true;
	}}
	onDragleave={(e) => {
		isDraggingOver = false;
	}}
	{dropzoneElement}
	onDrop={handleFilesSelect}
></Dropzone>

```

Example

```svelte
<script lang="ts">
	import type { CustomDropzoneProps, DropzoneEvent, RejectedFile } from 'svelte-dropzone-runes';
	import Dropzone from 'svelte-dropzone-runes';
	let dropzoneElement: HTMLElement | undefined = $state();
	let isDraggingOver = $state(false);

let files = $state({
		acceptedFiles: [] as File[],
		rejectedFiles: [] as RejectedFile<File>[]
	});

{#snippet CustomDropzone(props: CustomDropzoneProps)}
	<div bind:this={dropzoneElement} class="dropzone custom-dropzone" {...props}>Custom Dropzone</div>
{/snippet}

<Dropzone
	accept={["image/*"]}
	multiple
	onDragenter={(e) => {
		isDraggingOver = true;
	}}
	onDragleave={(e) => {
		isDraggingOver = false;
	}}
	{dropzoneElement}
	onDrop={handleFilesSelect}
	{CustomDropzone}
></Dropzone>

.dropzone:hover {
		border-color: #2196f3;
	}

.dropzone:focus {
		border-color: #2196f3;
	}

.custom-dropzone {
		background-color: wheat;
		color: black;
		transition: all 0.3s;
	}

.custom-dropzone:focus {
		padding: 40px;

}

.custom-dropzone:hover {
		padding: 40px;
	}

.custom-dropzone.hover {
		padding: 40px;
	}
</style>
```

## 📚 Important Notes
The underlying logic is inspired by react-dropzone and svelte-file-dropzone but tailored for idiomatic Svelte 5 use.

If using Custom UI bind dropzoneElement to the drop target inside the CustomUI.
If using form, set name and required on the dropzone to tie into form validation.
If not using multiple drag items after the first one will be rejected.
You can't validate file size during drag events because DataTransferItem doesn't expose file size.

svelte-dropzone-runes

svelte-dropzone-runes 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

svelte-dropzone-runes

svelte-dropzone-runes 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README