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 |