simple-dropzone

0.8.3 • Public • Published

simple-dropzone

Latest NPM release Minzipped size License CI

A simple drag-and-drop input using vanilla JavaScript.

The library supports supports selection of multiple files, ZIP decoding, and fallback to <input type=file multiple> on older browsers.

Installation

npm install --save simple-dropzone

Usage

Create DOM elements for the dropzone and a file input (for compatibility with older browsers). Both may be styled in CSS however you choose.

<div id="dropzone"></div>
<input type="file" id="input">

Create a SimpleDropzone controller. When files are added, by drag-and-drop or selection with the input, a drop event is emitted. This event contains a map of filenames to HTML5 File objects. The file list is flat, although directory structure is shown in the filenames.

dropzone.on('drop', ({files}) => {
  console.log(files);
});

Optionally, you may want to set additional attributes to configure the file input element, e.g. to allow selection of multiple files.

API

SimpleDropzone( dropEl, inputEl )

Constructor takes two DOM elements, for the dropzone and file input.

const dropEl = document.querySelector('#dropzone');
const inputEl = document.querySelector('#input');
const dropCtrl = new SimpleDropzone(dropEl, inputEl);
<div id="dropzone"></div>
<input type="file" id="input">

.on( event, callback ) : this

Listens for event and invokes the callback.

dropCtrl.on('drop', ({files}) => {
  console.log(files);
});

.destroy()

Destroys the instance and unbinds all events.

Events

Event Properties Description
drop files : Map<string, File>, archive?: File New files added, from either drag-and-drop or selection. archive is provided if the files were extracted from a ZIP archive.
dropstart Selection is in progress. Decompressing ZIP archives may take several seconds.
droperror message : string Selection has failed.

Package Sidebar

Install

npm i simple-dropzone

Weekly Downloads

533

Version

0.8.3

License

MIT

Unpacked Size

1.45 MB

Total Files

12

Last publish

Collaborators

  • donmccurdy