A javascript library to give file dropping super-powers to any HTML element.

New    Add a CSS class to the element when the files are being dropped!


Tiny footprint

With zero dependencies and code written with the last bit in mind the library weighs only ~4 KB minified


Built for the enterprise, flexibility was a must.

Some of the available options are

  • Accept single or multiple files
  • Prompt the user for files when the droppable element is clicked
  • Programatically prompt for files
  • Add a class to the element when files are being dropped

Free and reliable.

Being MIT Licensed, 100% Tested, semantically versioned, fully accesible and used in a heavy load monitored production environment, you can trust the library to work in any environment.


$ npm install droppable

Basic Usage

const Droppable = require('droppable');

const droppable = new Droppable({
    element: document.querySelector('#my-droppable-element')

droppable.onFilesDropped((files) => {
    console.log('Files were dropped:', files);

// Clean up when you're done!

Want to know more?