https://github.com/probablykasper/svelte-tauri-filedrop

Tauri file drop handling component for Svelte
https://github.com/probablykasper/svelte-tauri-filedrop

dropzone filedrop package svelte tauri

Last synced: 4 months ago
JSON representation

Tauri file drop handling component for Svelte

• Host: GitHub
• URL: https://github.com/probablykasper/svelte-tauri-filedrop
• Owner: probablykasper
• License: mit
• Created: 2021-12-01T03:44:40.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-05-18T22:38:01.000Z (over 1 year ago)
• Last Synced: 2024-04-23T11:16:18.688Z (10 months ago)
• Topics: dropzone, filedrop, package, svelte, tauri
• Language: Svelte
• Homepage:
• Size: 374 KB
• Stars: 30
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tauri - svelte-tauri-filedrop - File drop handling component for Svelte. (Development / Integrations)

README

        
# Svelte Tauri FileDrop

[![License](https://img.shields.io/npm/l/svelte-tauri-filedrop.svg)](LICENSE)

[![NPM Version](https://img.shields.io/npm/v/svelte-tauri-filedrop.svg)](https://npmjs.com/package/svelte-tauri-filedrop)

[![NPM Downloads](https://img.shields.io/npm/dm/svelte-tauri-filedrop.svg)](https://npmjs.com/package/svelte-tauri-filedrop)

Tauri file drop handling component for Svelte.

## Install

```

npm install svelte-tauri-filedrop

```

## Usage

```svelte

  import FileDrop from 'svelte-tauri-filedrop'

  function open(paths: string[]) {

    // ...

  }

  
 0}>

    
Drop JSON files

  


  .dropzone {

    margin: 20px;

    padding: 20px;

    background: #eee;

  }

  .droppable {

    background: #d6dff0;

  }

```

## 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](https://tauri.studio/en/docs/getting-started/intro)

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 check

    ```

3. Bump the version number

    ```

    npm version --no-git-tag 

    ```

4. Generate the package

    ```

    npm run package

    ```

5. Publish the package

    ```

    npm publish ./package

    ```

6. Commit with a tag in format "v#.#.#"

7. Create GitHub release with release notes