svelte-file-dropzone


SvelteJS component for file upload and dropzone.The component is Svelte implementation of react-dropzone.

Demo

Click here for Storybook link

Installation

``
npm install svelte-file-dropzone

or

yarn add svelte-file-dropzone
`

Usage

`svelte

{#each files.accepted as item}

1. {item.name}

{/each}

`

API

$3

| 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 |

$3

| 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 | | |

$3

Click here to view stories implementation

Credits

Component is reimplementation react-dropzone. Complete credit goes to author and contributors of react-dropzone.

License

MIT