- Notifications
You must be signed in to change notification settings - Fork46
Svelte component for fileupload
NotificationsYou must be signed in to change notification settings
thecodejack/svelte-file-dropzone
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
SvelteJS component for file upload and dropzone.The component is Svelte implementation ofreact-dropzone.
npm install svelte-file-dropzoneoryarn add svelte-file-dropzone<script>importDropzonefrom"svelte-file-dropzone";let files= { accepted: [], rejected: [] };functionhandleFilesSelect(e) {const {acceptedFiles,fileRejections }=e.detail;files.accepted= [...files.accepted,...acceptedFiles];files.rejected= [...files.rejected,...fileRejections]; }</script><Dropzoneon:drop={handleFilesSelect} /><ol> {#eachfiles.acceptedasitem} <li>{item.name}</li> {/each}</ol>
| Prop Name | Description | Default Value |
|---|---|---|
| accept | Set accepted file types. Seehttps://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 |
| 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 |
Click here to view stories implementation
Component is reimplementationreact-dropzone. Complete credit goes to author and contributors ofreact-dropzone.
MIT
About
Svelte component for fileupload
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors11
Uh oh!
There was an error while loading.Please reload this page.