@ctrl/ngx-droppable
v4.0.3
Published
give file dropping super-powers to any HTML element
Downloads
512
Maintainers
Readme
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