kasper.space / svelte-droplet
[READ-ONLY] Mirror of https://github.com/probablykasper/svelte-droplet. File dropzone for Svelte svelte-droplet.kasper.space
file-drop svelte typescript
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

46 1 10

Clone this repository

https://tangled.org/kasper.space/svelte-droplet https://tangled.org/did:plc:ewghg7y6jehilcp4okp2fcyc
git@tangled.org:kasper.space/svelte-droplet git@tangled.org:did:plc:ewghg7y6jehilcp4okp2fcyc

For self-hosted knots, clone URLs may differ based on your setup.


Download tar.gz Download .zip
README.md

Svelte Droplet#

NPM License NPM Downloads test

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