diff --git a/packages/gallery/src/interface/components/dropzone.js b/packages/gallery/src/interface/components/dropzone.js index 87c4f3a..8249eb2 100644 --- a/packages/gallery/src/interface/components/dropzone.js +++ b/packages/gallery/src/interface/components/dropzone.js @@ -16,17 +16,32 @@ const CSS_DROPZONE_ACTIVE = { }; export function Dropzone(vm, params) { - const { ondrop, ondragenter, ondragleave, className, activeClassName, content } = params; + const { + ondrop, + ondragenter, + ondragleave, + className, + hoverClassName, + content, + hoverContent, + dropEffect + } = params; const baseClassName = className || injectStyle(CSS_DROPZONE); - const hoverClassName = `${baseClassName} ${activeClassName || injectStyle(CSS_DROPZONE_ACTIVE)}`; + const activeClassName = `${baseClassName} ${hoverClassName || injectStyle(CSS_DROPZONE_ACTIVE)}`; const enterCounter = prop(0); - const class_ = computed(c => (c === 0 ? baseClassName : hoverClassName), [enterCounter]); + const active = computed(c => c > 0, [enterCounter]); + const _class = computed(a => (a && hoverClassName ? activeClassName : baseClassName), [active]); + const _content = computed(a => (a && hoverContent ? hoverContent : content), [active]); function onDragOver(evt) { // allows the browser to accept drops. evt.preventDefault(); + + if (dropEffect) { + evt.dataTransfer.dropEffect = dropEffect; + } } function onDragEnter() { @@ -50,7 +65,7 @@ export function Dropzone(vm, params) { enterCounter(0); if (ondrop) { - ondrop(evt.dataTransfer.files); + ondrop(evt, evt.dataTransfer.files); } } @@ -58,13 +73,14 @@ export function Dropzone(vm, params) { return el( 'div', { - class: class_, + class: _class, + 'data-hover': active, // only here to subscribe to the change ondragenter: onDragEnter, ondragover: onDragOver, ondragleave: onDragLeave, ondrop: onDrop }, - content() + _content()() ); }; } diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js index 18aaa4b..17760f7 100644 --- a/packages/gallery/src/interface/gallery.js +++ b/packages/gallery/src/interface/gallery.js @@ -100,10 +100,8 @@ export function GalleryView(vm) { { className: slate, activeClassName: 'dropHover', + dropEffect: 'copy', ondrop: uploadImages, - type: 'file', - multiple: true, // FIXME - these don't carry through to the input tag - accept: 'image/jpeg', content: renderDropzone }, 'dz'