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

``sh
npm install @ctrl/ngx-droppable
`

Use

Import and Add to module

`ts
import { DroppableModule } from "@ctrl/ngx-droppable";
`

Add droppable directive to element

`html



`

[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