Skip to content

thecodejack/svelte-file-dropzone

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

svelte-file-dropzone

NPM npm bundle size (minified + gzip)

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

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