svelte-file-dropzone-with-label
TypeScript icon, indicating that this package has built-in type declarations

2.0.4 • 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.

This is a fork of svelte-file-dropzone which allows the user to edit the label inside of the dropzone.

Demo

Click here for Storybook link

Installation

npm install svelte-file-dropzone-with-label

or

yarn add svelte-file-dropzone-with-label

Usage

<script>
  import Dropzone from "svelte-file-dropzone-with-label/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
label label inside of the dropzone "Drag 'n' drop some files here, or click to select files"

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 svelte-file-dropzone-with-label

Weekly Downloads

0

Version

2.0.4

License

MIT

Unpacked Size

41 kB

Total Files

11

Last publish

Collaborators

  • roborob