Awesome File Drop JavaScript Library – droppable

Preview:

Description:

droppable is an awesome dependency-free JavaScript library to handle file upload when single or multiple files are dragged and dropped on a specific element.

Lightweight, accessible and easy to use.

How to use it:

Install the droppable with NPM.

# NPM
$ npm install droppable --save

Import the droppable.

// ES 6
import Droppable from 'droppable';
// CommonJS:
const Droppable = require('droppable');

Create a new droppable element for file(s) selection.

const myDroppable = new Droppable({
      element: document.querySelector('#myElement')
})

Decide whether to allow multiple files.

const myDroppable = new Droppable({
      element: document.querySelector('#myElement'),
      acceptsMultipleFiles: true
})

Enable the droppable element to select file(s) by click.

const myDroppable = new Droppable({
      element: document.querySelector('#myElement'),
      isClickable: true
})

Append status classes to the droppable element.

const myDroppable = new Droppable({
      element: document.querySelector('#myElement'),
      appendStatusClasses: true
})

Get the latest selected file(s).

myDroppable.getLatestDroppedFiles();

Prompt the user for file(s).

myDroppable.promptForFiles();

The event listener which will be triggered after files are dropped.

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

Changelog:

v2.2.0 (07/04/2018)

• Update