svelte-file-dropzone-with-label

svelte-file-dropzone

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