Skip to content
Give file dropping super-powers to any element or component
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.codecov.yml
.editorconfig
.gitignore
LICENSE
README.md
angular.json
browserslist
build.ts
circle.yml
karma.conf.js
package-lock.json
package.json
renovate.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

README.md

ngx-droppable


npm travis codecov

Give file dropping super-powers to any element or component

Based on droppable.js

Demo: https://ngx-droppable.netlify.com/

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

You can’t perform that action at this time.