beynar/svelte-dropzone

A simple & ssr ready wrapper around dropzone.JS for svelte/sapper.

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="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>

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

svelte-dropzone's Issues

Your code is buggy and not up to date with published npm package

It was very frustrating to see that you occupied this npm package name and don't invest the effort to get things right! #@!

Unexpected token <

I'm getting this error in a svelte/sapper app.
Any ideas?

/Users/phil/websites/image-library/node_modules/svelte-dropzone/index.svelte:1
<script>
^

SyntaxError: Unexpected token <
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/phil/websites/image-library/__sapper__/dev/server/server.js:10:32)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)

There's a typo (unrelated) in the readme example

<script>
  import Dropzone from "sv-dropzone"

should be

<script>
  import Dropzone from "svelte-dropzone"

dropzone.js:1040 Uncaught Error: Dropzone already attached.

Uncaught Error: Dropzone already attached.
at new Dropzone (dropzone.js:1040)
at dropzone.js:2968
at Function.push../node_modules/dropzone/dist/dropzone.js.Dropzone.discover (dropzone.js:2974)
at push../node_modules/dropzone/dist/dropzone.js.Dropzone._autoDiscoverFunction (dropzone.js:3516)
at HTMLDocument.init (dropzone.js:3484)

Component doesn't work with standard template / please update

Hi Arnoud,

I just tried to make svelte-dropzone run as a sapper/svelte app with the standard template, just replacing index.svelte with your code - with no success. You readme looks great and easy, but then it doesn't work, as other issues are stating.

Your npm package is downloaded 50 times a week, which means that about 200 people spend 10 minutes or even hours with your software every month, trying to make it work.

It would be great if you could

1. Update the instructions so it runs with the basic sapper template
2. Fix the code if this is required to make it work
3. Fix the npm package as some issues state it has errors
4. Or - at least - write in bold letters, that this is not maintained. I think that's just fair.

Here is my little test:

$ npx degit "sveltejs/sapper-template#rollup" droptest
$ cd droptest
$ npm i
$ npm i svelte-dropzone
### replace index.svelte content with code from readme
$ npm run dev

> [email protected] dev /droptest
> sapper dev

✔ server (2.3s)
✔ client (2.9s)
✔ service worker (27ms)
/droptest/node_modules/svelte-dropzone/index.svelte:1
<script>
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/droptest/__sapper__/dev/server/server.js:10:32)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
> Server crashed

Anyway, thanks for sharing your code - I was looking for a solution like this.

Uncaught ReferenceError: Dropzone is not defined

This error always show up when load the component and failed to load
Uncaught ReferenceError: Dropzone is not defined

This doesn't work, please don't waste your time with it. It's easier to use vanilla Dropbox in your code.

Rollup error

I tried to use this component as described on README.md.
But, rollup showed me a error below.
[!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
My rollup config is from svelte-template.
https://github.com/sveltejs/template
I cannot figure out this problem, but I can still learn from your code.
Thank you.

Your example from Readme.md is not working out of the box

the callback functions are not called and you use Tag which is wrong.

It should be to correspond with your code

MIT License in npm, but none in the repo

I would love if you could add the same license to this repo as it listed on the npm package page:

https://www.npmjs.com/package/svelte-dropzone

Thank you!