give file dropping super-powers to any HTML element
npm install @ctrl/ngx-droppable> Give file dropping super-powers to any element or component
Based on droppable.js
Demo: https://ngx-droppable.vercel.app
Latest version available for each version of Angular
| @ctrl/ngx-droppable | Angular |
| ------------------- | ------- |
| current | >= 10.x |
``sh`
npm install @ctrl/ngx-droppable
Import and Add to module
`ts`
import { DroppableModule } from "@ctrl/ngx-droppable";
Add droppable directive to element
`html`
| name | type | default | description |
| -------------------- | ----------------- | ------------ | ------------------------------------------------------------------------------------------------------------------ |
| isClickable | boolean | true | prompt for files when clicked |boolean
| acceptsMultipleFiles | | true | allow multiple files dropped or selected |boolean
| appendStatusClasses | | true | append CSS class when files are dragged on element |string
| dragOverClass | | 'dragover' | class added when files are hovered over element |string \| false
| accept | | false | limit accepted file types via MIME see mdn |
| name | type | description |
| ------------ | -------- | --------------------------------------------------------------------------------------------------------- |
| filesDropped | File[]` | An array of the files blobs that have been added |
MIT
---