svelte-dropzone

svelte-dropzone is a simple & ssr ready wrapper around dropzone.JS for svelte and sapper.

Installation

$ npm i svelte-dropzone

Usage

<script>
  import Dropzone from "svelte-dropzone";
  const addedfile = file => console.log(file);
  const drop = event => console.log(event.target);
  const init = () => console.log("dropzone init ! 😍");
</script>

<Dropzone
  dropzoneClass="dropzone"
  hooveringClass="hooveringClass"
  id="id"
  dropzoneEvents={{ addedfile, drop, init }}
  options={{ clickable: true, acceptedFiles: 'text/javascript', maxFilesize: 256, init }}>
  <p>Drop files here to upload</p>
</Dropzone>

API

| prop | default | type/structure | | -------------- | -------------------------------------------------------------------- | ------------------------------------- | | dropzoneEvents | {} | object:{{ eventName: func}} | | options | { previewTemplate: "<div/>", dictDefaultMessage: "" } | object:{{ optionName: optionValue}} | | dropzoneClass | "dropzone" | string | | hooveringClass | "dropzone-hoovering" | string | | id | "dropId" | string | | autoDiscover | false | bool | | slot | <p class="dropzoneDefaultSentence"> Drop files here to upload </p> | element |

• All dropzone events can be found here
• All dropzone options can be found here