# svelte-droplet

> File dropzone for Svelte

Latest version **1.1.0** (published 2024-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-droplet
pnpm add svelte-droplet
yarn add svelte-droplet
bun add svelte-droplet
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-10-23 |
| First published | 2022-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Kasper Henningsen |
| Maintainers | probablykasper |
| Keywords | svelte, file, filedrop, drag, drop, dropzone, upload, input, component |

## Links

- npm: https://www.npmjs.com/package/svelte-droplet
- Repository: https://github.com/probablykasper/svelte-droplet
- Homepage: https://svelte-droplet.kasper.space
- Issues: https://github.com/probablykasper/svelte-droplet/issues
- npm.io page: https://npm.io/package/svelte-droplet

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-10-23
- 1.0.1 — 2023-12-19
- 1.0.0 — 2023-09-10
- 0.3.0 — 2022-12-28
- 0.2.1 — 2022-11-17
- 0.2.0 — 2022-03-31
- 0.1.3 — 2022-03-30
- 0.1.2 — 2022-03-24
- 0.1.1 — 2022-03-24
- 0.1.0 — 2022-03-24

## README

# Svelte Droplet

[![NPM](https://img.shields.io/npm/v/svelte-droplet.svg)](https://npmjs.com/package/svelte-droplet)
[![License](https://img.shields.io/npm/l/svelte-droplet.svg)](LICENSE)
[![NPM Downloads](https://img.shields.io/npm/dm/svelte-droplet.svg)](https://npmjs.com/package/svelte-droplet)
[![test](https://github.com/probablykasper/svelte-droplet/actions/workflows/test.yml/badge.svg)](https://github.com/probablykasper/svelte-droplet/actions/workflows/test.yml)

File dropzone for Svelte

[REPL](https://svelte.dev/repl/961863cf346c474888b658b98dcbf287?version=3.46.4)

## Install

```
npm install svelte-droplet
```

## Usage

```svelte
<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.<br>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.<br>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

---
_Source: https://npm.io/package/svelte-droplet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._