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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes