first upload

dropzone.svelte

@@ -0,0 +1,71 @@
+<script>
+  import { onMount } from "svelte";
+  import Dropzone from "dropzone";
+  export let dropzoneEvents = {};
+  export let options = { previewTemplate: "<div/>" };
+  export let dropzoneClass = "dropzone";
+  export let hooveringClass = "dropzone-hoovering";
+  export let id = "dropId";
+  export let autoDiscover = false;
+
+  onMount(() => {
+    const dropzoneElement = document.getElementById(id);
+    if (!options.previewTemplate) {
+      options.previewTemplate = "<div/>";
+    }
+    if (!options.dictDefaultMessage) {
+      options.dictDefaultMessage = "";
+    }
+
+    let svDropzone = new Dropzone(`div#${id}`, {
+      ...options
+    });
+    if (autoDiscover !== true) {
+      svDropzone.autoDiscover = false;
+    }
+
+    svDropzone.on("addedfile", f => {
+      dropzoneElement.classList.remove(hooveringClass);
+    });
+    svDropzone.on("dragenter", e => {
+      console.log(dropzoneElement);
+      dropzoneElement.classList.toggle(hooveringClass);
+    });
+    svDropzone.on("dragleave", e => {
+      dropzoneElement.classList.toggle(hooveringClass);
+    });
+    Object.entries(dropzoneEvents).map(([eventKey, eventFunc]) =>
+      svDropzone.on(eventKey, eventFunc)
+    );
+
+    if (options.clickable !== false) {
+      dropzoneElement.style.cursor = "pointer";
+    }
+    svDropzone.on("error", (file, errorMessage) => {
+      console.log(`Error: ${errorMessage}`);
+    });
+  });
+</script>
+
+<style>
+  .dropzone {
+    height: 300px;
+    background: #fdfdfd;
+    border-radius: 5px;
+    border: 2px dashed #ff3e00;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 300ms ease-out;
+  }
+
+  .dropzone.dropzone-hoovering {
+    border: 2px solid #ff3e00;
+    background: rgba(255, 62, 0, 0.05);
+  }
+</style>
+
+<div action="#" class={dropzoneClass} {id}>
+  <slot />
+  <input hidden name="sites_data" type="file" />
+</div>

index.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { onMount } from "svelte";
+  export let dropzoneEvents = {};
+  export let options = { previewTemplate: "<div/>" };
+  export let dropZoneClass = "dropzone";
+  export let hooveringClass = "dropzone-hoovering";
+  export let id = "dropId";
+  export let autoDiscover = false;
+
+  let DROPZONESSR;
+
+  onMount(async () => {
+    const dropzone = await import("./dropzone.svelte");
+    DROPZONESSR = dropzone.default;
+  });
+</script>
+
+<style>
+  p.dropzoneDefaultSentence {
+    font-size: 30px;
+  }
+</style>
+
+<svelte:component
+  this={DROPZONESSR}
+  {dropzoneEvents}
+  {options}
+  {dropZoneClass}
+  {hooveringClass}
+  {id}>
+  <slot>
+    <p class="dropzoneDefaultSentence">
+      drop your file(s) here or click to add file
+    </p>
+  </slot>
+</svelte:component>

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "sv-dropzone",
+  "version": "1.0.1",
+  "description": "A simple && ssr ready wrapper around dropzone.JS for svelte/sapper.",
+  "keywords": [
+    "svelte",
+    "sapper",
+    "dropzone",
+    "file upload"
+  ],
+  "main": "index.svelte",
+  "author": "Arnaud DERBEY",
+  "license": "MIT",
+  "dependencies": {
+    "dropzone": "^5.5.1"
+  }
+}

readme.md

@@ -0,0 +1,54 @@
+# sv-dropzone
+
+sv-dropzone is a simple & ssr ready wrapper around [dropzoneJS] for [svelte] and [sapper].
+![cover](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)
+
+## Installation
+
+```bash
+$ npm i sv-dropzone
+```
+
+## Usage
+
+```js
+
+<script>
+  import Dropzone from "sv-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 }}
+  options={{ clickable: true, acceptedFiles: 'text/javascript', maxFilesize: 256, init }}>
+  <p>hello</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 your file(s) here or click to add file </p>` | element                               |
+
+- All dropzone events can be found [here](https://www.dropzonejs.com/#events-list)
+- All dropzone options can be found [here](https://www.dropzonejs.com/#configuration-options)
+
+[dropzonejs]: https://www.dropzonejs.com/
+[svelte]: https://svelte.dev/
+[sapper]: https://svelte.dev/
+[eventname]: https://www.dropzonejs.com/#events
+[optionname]: https://www.dropzonejs.com/#configuration-options
+[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"