2.0.7 • Published 25 days ago
svelte-file-dropzone v2.0.7
svelte-file-dropzone
SvelteJS component for file upload and dropzone.The component is Svelte implementation of react-dropzone.
Demo
Installation
npm install svelte-file-dropzone
or
yarn add svelte-file-dropzone
Usage
<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 to view stories implementation
Credits
Component is reimplementation react-dropzone. Complete credit goes to author and contributors of react-dropzone.
License
MIT
2.0.5
27 days ago
2.0.7
25 days ago
2.0.6
26 days ago
2.0.4
3 months ago
2.0.3
4 months ago
2.0.2
10 months ago
1.2.0
1 year ago
1.1.0
1 year ago
1.1.0-beta1
1 year ago
1.1.2-beta2
1 year ago
1.1.2-beta1
1 year ago
1.1.2-beta4
1 year ago
1.1.2-beta3
1 year ago
1.1.2-beta6
1 year ago
1.1.2-beta5
1 year ago
1.1.2-beta8
1 year ago
1.1.2-beta7
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
2.0.0-beta1
1 year ago
1.0.0
2 years ago
0.0.16-dev.0
2 years ago
1.0.0-dev.1
2 years ago
0.0.15
3 years ago
0.0.15-dev.0
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.12-beta.0
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.8-0
4 years ago
0.0.8-1
4 years ago
0.0.4
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago