Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.
/ ngx-droppable Public archive

Give file dropping super-powers to any element or component

License

Notifications You must be signed in to change notification settings

scttcper/ngx-droppable

Repository files navigation

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