Svelte Droplet

File dropzone for Svelte

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

Slot props

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

Dev instructions

Get started

Install Node.js (v14 works)
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

Update CHANGELOG.md
Check for errors
```
npm run lint
```
Bump the version number
```
npm version --no-git-tag <version>
```
Generate the package
```
npm run package
```
Publish the package
```
npm publish
```
Commit with a tag in format "v#.#.#"
Create GitHub release with release notes

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing