Svelte Droplet

File dropzone for Svelte

REPL

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

Slot props

Prop	Type	Description
droppable	boolean	True if the dropzone is currently hovered with valid files

Dev instructions

Get started

1. Install Node.js (v14 works)
2. Run npm install

Commands

• npm run dev: Start in dev mode
• npm run build: Build
• npm run preview: Preview production app
• npm run lint: Lint
• npm run format: Format

Publish new version

1. Update CHANGELOG.md
2. Check for errors

   npm run lint
   

3. Bump the version number

   npm version --no-git-tag <version>
   

4. Generate the package

   npm run package
   

5. Publish the package

   npm publish
   

6. Commit with a tag in format "v#.#.#"
7. Create GitHub release with release notes