Svelte Tauri FileDrop

Tauri file drop handling component for Svelte.

Install

npm install svelte-tauri-filedrop

Usage

<script lang="ts">
    import FileDrop from 'svelte-tauri-filedrop'

    function open(paths: string[]) {
        // ...
    }
</script>

<FileDrop extensions={['json']} handleFiles={open} let:files>
    <div class="dropzone" class:droppable={files.length > 0}>
        <h2>Drop JSON files</h2>
    </div>
</FileDrop>

<style>
    .dropzone {
        margin: 20px;
        padding: 20px;
        background: #eee;
    }
    .droppable {
        background: #d6dff0;
    }
</style>

API

extensions property: string[] | null

List of allowed file extensions. Disallowed files are filtered out. If it's null (default), all file extensions are allowed.

handleFiles property: (string[]) => {}

Handle a file drop of one or more files

handleOneFile property: (string[]) => {}

Handle a file drop of a single file. Note that handleFile() is also called. This is not called if any disallowed files were filtered out.

files slot property: string[]

An array of the currently droppable files, excluding disallowed files. You can use this variable through a let binding: let:files.

Dev Instructions

Get started

1. Install Node.js (v14 works)
2. Install Rust (v1.50 works)
3. Follow the Tauri setup guide
4. Run npm install

Commands

• npm run dev: Start in dev mode
• npm run package: Build and package the component
• 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