ngx-droppable

Give file dropping super-powers to any element or component

Based on droppable.js

Demo: https://ngx-droppable.vercel.app

Dependencies

Latest version available for each version of Angular

@ctrl/ngx-droppable	Angular
current	>= 10.x

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	limit accepted file types via MIME see mdn

(Ouput)

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

License

MIT

---

GitHub @scttcper  ·  Twitter @scttcper