File dropzone for Svelte
npm install svelte-droplet
<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>
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 |
Prop | Type | Description |
---|---|---|
droppable |
boolean | True if the dropzone is currently hovered with valid files |
npm install
npm run dev
: Start in dev modenpm run build
: Buildnpm run preview
: Preview production appnpm run lint
: Lintnpm run format
: FormatCHANGELOG.md
npm run lint
npm version --no-git-tag <version>
npm run package
npm publish