@undp-data/svelte-file-dropzone
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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/Dropzone.svelte";

  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

Package Sidebar

Install

npm i @undp-data/svelte-file-dropzone

Weekly Downloads

122

Version

2.0.3

License

MIT

Unpacked Size

41.4 kB

Total Files

14

Last publish

Collaborators

  • mustafa.saifee
  • iferencik
  • thuhadev
  • j_igarashi