Package Exports

svelte-file-dropzone
svelte-file-dropzone/dist/index.js
svelte-file-dropzone/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-file-dropzone) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

<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