# svelte-file-dropzone

> Svelte component for fileupload and file dropzone

Latest version **2.0.9** (published 2024-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-file-dropzone
pnpm add svelte-file-dropzone
yarn add svelte-file-dropzone
bun add svelte-file-dropzone
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.9 |
| Published | 2024-10-19 |
| First published | 2020-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 276 |
| Author | thecodejack |
| Maintainers | thecodejack, arackaf |
| Keywords | svelte, svelte3, svelte-components, upload, dropzone, svelte-file-dropzone, svelte-dropzone, sveltejs |

## Links

- npm: https://www.npmjs.com/package/svelte-file-dropzone
- Repository: https://github.com/thecodejack/svelte-file-dropzone
- Homepage: https://github.com/thecodejack/svelte-file-dropzone#readme
- Issues: https://github.com/thecodejack/svelte-file-dropzone/issues
- npm.io page: https://npm.io/package/svelte-file-dropzone

## Dependencies (1)

- [file-selector](https://npm.io/package/file-selector.md) ^0.6.0

## Recent versions

- 2.0.9 (latest) — 2024-10-19
- 2.0.8 — 2024-09-01
- 2.0.7 — 2024-04-08
- 2.0.6 — 2024-04-07
- 2.0.5 — 2024-04-06
- 2.0.4 — 2024-01-19
- 2.0.3 — 2024-01-18
- 2.0.2 — 2023-07-09
- 2.0.1 — 2023-03-22
- 1.2.0 — 2023-03-22
- 2.0.0 — 2023-03-21
- 2.0.0-beta1 — 2023-03-21
- 1.1.2-beta8 — 2023-03-21
- 1.1.2-beta7 — 2023-03-21
- 1.1.2-beta6 — 2023-03-21
- … 27 more at https://npm.io/package/svelte-file-dropzone/versions

## README

# svelte-file-dropzone

[![NPM](https://img.shields.io/npm/v/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-file-dropzone.svg)](https://www.npmjs.com/package/svelte-file-dropzone)

SvelteJS component for file upload and dropzone.The component is Svelte implementation of [react-dropzone](https://github.com/react-dropzone/react-dropzone).

## Demo

[Click here for Storybook link](https://svelte-file-dropzone.netlify.app/?path=/info/examples--basic-dropzone)

## Installation

```
npm install svelte-file-dropzone

or

yarn add svelte-file-dropzone
```

## Usage

```svelte
<script>
  import Dropzone from "svelte-file-dropzone";

  let files = {
    accepted: [],
    rejected: []
  };

  function handleFilesSelect(e) {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [...files.accepted, ...acceptedFiles];
    files.rejected = [...files.rejected, ...fileRejections];
  }
</script>

<Dropzone on:drop={handleFilesSelect} />
<ol>
  {#each files.accepted as item}
    <li>{item.name}</li>
  {/each}
</ol>
```

## API

### Props

| Prop Name             | Description                                                                              | Default Value |
| --------------------- | ---------------------------------------------------------------------------------------- | ------------- |
| accept                | Set accepted file types. See https://github.com/okonet/attr-accept for more information. | undefined     |
| disabled              |                                                                                          | false         |
| maxSize               |                                                                                          | Infinity      |
| minSize               |                                                                                          | 0             |
| multiple              | if true, multiple files can be selected at once                                          | true          |
| preventDropOnDocument | 1231                                                                                     | true          |
| noClick               | disable click events                                                                     | false         |
| noKeyboard            | disable keyboard events                                                                  | false         |
| noDrag                | disable drag events                                                                      | false         |
| containerClasses      | custom container classes                                                                 | ""            |
| containerStyles       | custom inline container styles                                                           | ""            |
| disableDefaultStyles  | don't apply default styles to container                                                  | false         |
| inputElement          | reference to inputElement                                                                | undefined     |
| required              | html5 required attribute added to input                                                  | false         |

### Events

| Event Name       | Description | `event.detail` info                    |
| ---------------- | ----------- | -------------------------------------- |
| dragenter        |             | `{dragEvent: event}`                   |
| dragover         |             | `{dragEvent: event}`                   |
| dragleave        |             | `{dragEvent: event}`                   |
| drop             |             | `{acceptedFiles,fileRejections,event}` |
| filedropped      |             | `{event}`                              |
| droprejected     |             | `{fileRejections,event}`               |
| dropaccepted     |             | `{acceptedFiles,event}`                |
| filedialogcancel |             |                                        |

### Examples

[Click here](https://github.com/thecodejack/svelte-file-dropzone/tree/master/stories/views) to view stories implementation

## Credits

Component is reimplementation [react-dropzone](https://github.com/react-dropzone/react-dropzone). Complete credit goes to author and contributors of [react-dropzone](https://github.com/react-dropzone/react-dropzone).

## License

MIT

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