Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chanced/filedrop-svelte
File dropzone for Svelte.
https://github.com/chanced/filedrop-svelte
drag-and-drop dropzone file svelte
Last synced: 6 days ago
JSON representation
File dropzone for Svelte.
- Host: GitHub
- URL: https://github.com/chanced/filedrop-svelte
- Owner: chanced
- License: mit
- Created: 2021-07-27T04:38:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-09T23:27:13.000Z (8 months ago)
- Last Synced: 2024-10-23T07:54:00.536Z (14 days ago)
- Topics: drag-and-drop, dropzone, file, svelte
- Language: TypeScript
- Homepage:
- Size: 351 KB
- Stars: 111
- Watchers: 3
- Forks: 12
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FileDrop
A file dropzone action & component for [Svelte](https://svelte.dev/).
## Install
```bash
npm i filedrop-svelte -D
# yarn add filedrop-svelte -dev
```
If using Typescript, see the [Typescript section](#typescript).
## Usage
filedrop-svelte comes with both a component and an action. The component is basically a wrapper around the action with some some default styling.
### Component
See [this REPL for minmimal usage](https://svelte.dev/repl/511ad04931514bcf98f7408edb08d075?version=3.41.0).
```html
import FileDrop from "filedrop-svelte";
import type { Files } from "filedrop-svelte";
import fileSize from "filesize";
let files: Files;
{ files = e.detail.files }}>
Upload files
{#if files}
Accepted files
- {file.name} - {fileSize(file.size)}
{#each files.accepted as file}
{/each}
Rejected files
- {rejected.file.name} - {rejected.error.message}
{#each files.rejected as rejected}
{/each}
{/if}
```
### Action
See this [REPL for minimal usage](https://svelte.dev/repl/645841f327b8484093f94b84de8a7e64?version=3.41.0).
```html
import { filedrop } from "filedrop-svelte";
import type { Files, FileDropOptions } from "filedrop-svelte";
let options: FileDropOptions = {};
let files: Files;
Drag & drop files
{files}
```
## Reference
### Options
| parameter | purpose | type | default |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
| `accept` | specify file types to accept. See [HTML attribute: accept on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information. | `string` `string[]` | `undefined` |
| `maxSize` | the maximum size a file can be in bytes. | `number` | `undefined` |
| `minSize` | the minimum size a file can be in bytes. | `number` | `undefined` |
| `fileLimit` | total number of files allowed in a transaction. A value of 0 disables the action/component, 1 turns multiple off, and any other value enables multiple. Any attempt to upload more files than allowed will result in the files being placed in rejections | `numer` | `undefined` |
| `multiple` | sets the file input to `multiple`. See [HTML attribute: multiple on MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) for more information. | `boolean` | `true` |
| `disabled` | disables the action/component, removing all event listeners | `boolean` | `false` |
| `windowDrop` | determines whether or not files can be dropped anywhere in the window. A value of `false` would require that the files be droppped within the `` component or the element with `use:filedrop`. | `boolean` | `true` |
| `clickToUpload` | causes the containing element to be treated as the input. If hideInput is true or undefined, disabling this does not change the `tabindex` of the container or remove the `keydown` eventListener | `boolean` | `true` |
| `tabIndex` | tab index of the container. if `disabled` is `true` then this is set to `-1`. If `clickToUpload` is `true` or `undefined`, this defaults to 0. | `number` | `0` |
| `hideInput` | if true or undefined, input[type='file'] will be set to display:none | `boolean` | `true` |
| `input` | allows you to explicitly pass a reference to the file `HTMLInputElement` as a parameter. If `undefined`, the action will search for `input[type="file"]`. If one is not found, it will be appeneded to the element with `use:filedrop` | `HTMLInputElement` | `undefined` |
### Events
| event | description | `event.detail` |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| `filedrop` | one or more files has been selected in the file dialog or drag-and-dropped | `FileDropSelectEvent` |
| `filedragenter` | a dragenter event has occurred on the container element containnig one or more files | `FileDropDragEvent` |
| `filedragleave` | a dragleave event has occurred on the container element containing one or more files | `FileDropDragEvent` |
| `filedragover` | a dragover event has occurred on the container element containing one or more files | `FileDropDragEvent` |
| `filedialogcancel` | the file dialog has been canceled without selecting files | `FileDropEvent` |
| `filedialogclose` | the file dialog has been closed with files selected | `FileDropEvent` |
| `filedialogopen` | the file dialog has been opened | `FileDropEvent` |
| `windowfiledragenter` | a dragenter event has occurred on the document (event is named windowfiledragenter so not to confuse document with file) | `FileDropDragEvent` |
| `windowfiledragleave` | a dragleave event has occurred on the document (event is named windowfiledragleave so not to confuse document with file) | `FileDropDragEvent` |
| `windowfiledragover` | a dragover event has occurred on the document (event is named windowfiledragover so not to confuse document with file) | `FileDropDragEvent` |
### Errors
| class | reason | code |
| ------------------------------ | ------------------------------------------------------------- | --------------------------------- |
| `InvalidFileTypeError` | file type does not satisfy `accept` | `InvalidFileType` (**0**) |
| `FileCountExceededError` | total number of files selected or dropped exceeds `fileLimit` | `FileCountExceeded` (**1**) |
| `FileSizeMinimumNotMetError` | file does not satisify `minSize` | `FileSizeMinimumNotMet` (**2**) |
| `FileSizeMaximumExceededError` | file does not satisify `maxSize` | `FileSizeMaximumExceeded` (**3**) |
### Typescript
In order for typings to work properly, you'll need to add the following to
`global.d.ts` [until this issue is
resolved](https://github.com/sveltejs/language-tools/issues/431):
```typescript
declare type FileDropEvent = import("filedrop-svelte/event").FileDropEvent;
declare type FileDropSelectEvent = import("filedrop-svelte/event").FileDropSelectEvent;
declare type FileDropDragEvent = import("filedrop-svelte/event").FileDropDragEvent;
declare namespace svelte.JSX {
interface HTMLAttributes {
onfiledrop?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledragenter?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledragleave?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledragover?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledialogcancel?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledialogclose?: (event: CustomEvent & { target: EventTarget & T }) => void;
onfiledialogopen?: (event: CustomEvent & { target: EventTarget & T }) => void;
onwindowfiledragenter?: (event: CustomEvent & { target: EventTarget & T }) => void;
onwindowfiledragleave?: (event: CustomEvent & { target: EventTarget & T }) => void;
onwindowfiledragover?: (event: CustomEvent & { target: EventTarget & T }) => void;
}
}
```
You may need to edit `tsconfig.json` to include `global.d.ts` if it isn't already.
### Alternatives
- [svelte-file-dropzone](https://github.com/thecodejack/svelte-file-dropzone)
### Previous art
- [react-dropzone](https://github.com/react-dropzone/react-dropzone)
- [svelte-file-dropzone](https://github.com/thecodejack/svelte-file-dropzone)
### Dependencies
- [file-selector](https://github.com/react-dropzone/file-selector)
## Todo
- tests
- better documentation
- demo website
## License
MIT