svelte-dropzone is a simple & ssr ready wrapper around dropzone.JS for svelte and sapper.
$ npm i svelte-dropzone<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="dropzoneClass"
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>| 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 |