Svelte-droplet NPM

Svelte Droplet

File dropzone for Svelte

Install

npm install svelte-droplet

Usage

<script lang="ts">
	import { FileDrop } from 'svelte-droplet'
	function handleFiles(files: File[]) {
		for (const file of files) {
			console.log(file.name)
		}
	}
</script>
<FileDrop {handleFiles} let:droppable>
	<div class="zone" class:droppable>Select or drop files here</div>
</FileDrop>

Props

Prop	Type	Description
`handleFiles`	(files: File[]) => void	File handler function
`acceptedMimes`	string[] \| null	List of allowed MIME types, like `image/jpeg` or `image/*`. Invalid files are ignored.You can also use file extensions like `.jpg` but it will not enable `droppable` when the file is hovering, meaning you can't display a hover effect.Defaults to `null` (all are allowed)
`max`	number \| null	Max number of files allowed. Extra files are ignored. Defaults to 0 (no limit)
`disabled`	boolean	Disables the component
`name`	string \| null	Name of the input field, useful for forms
`tabindex`	number	Set a custom tabindex