https://github.com/thecodejack/svelte-file-dropzone
Svelte component for fileupload
https://github.com/thecodejack/svelte-file-dropzone
dropzone fileupload svelte3 sveltejs
Last synced: 7 months ago
JSON representation
Svelte component for fileupload
- Host: GitHub
- URL: https://github.com/thecodejack/svelte-file-dropzone
- Owner: thecodejack
- Created: 2020-06-17T16:18:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T20:43:14.000Z (about 1 year ago)
- Last Synced: 2025-04-14T00:59:30.376Z (8 months ago)
- Topics: dropzone, fileupload, svelte3, sveltejs
- Language: Svelte
- Homepage: https://svelte-file-dropzone.netlify.app/
- Size: 1.9 MB
- Stars: 270
- Watchers: 5
- Forks: 48
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-file-dropzone
[](https://www.npmjs.com/package/svelte-file-dropzone)
[](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
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];
}
{#each files.accepted as item}
- {item.name}
{/each}
```
## 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