@ctrl/ngx-droppable

ngx-droppable

Give file dropping super-powers to any element or component

Based on droppable.js

Demo: https://typectrl.github.io/ngx-droppable/

Install

npm install @ctrl/ngx-droppable

Use

Import and Add to module

import { DroppableModule } from '@ctrl/ngx-droppable';

Add droppable directive to element

<div droppable (filesDropped)="handleFilesDropped($event)"></div>

[Inputs]

name	type	default	description
isClickable	boolean	true	prompt for files when clicked
acceptsMultipleFiles	boolean	true	allow multiple files dropped or selected
appendStatusClasses	boolean	true	append CSS class when files are dragged on element
dragOverClass	string	'dragover'	class added when files are hovered over element
accept	`string	false`	false

(Ouput)

name	type	description
filesDropped	File[]	An array of the files blobs that have been added

License

MIT

---

GitHub @scttcper  ·  Twitter @scttcper