@ctrl/ngx-droppable
TypeScript icon, indicating that this package has built-in type declarations

4.0.3 • Public • Published

ngx-droppable npm CircleCI coverage

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

Package Sidebar

Install

npm i @ctrl/ngx-droppable

Weekly Downloads

64

Version

4.0.3

License

MIT

Unpacked Size

72.4 kB

Total Files

18

Last publish

Collaborators

  • scttcper