file-drops

A simple in-browser file drop utility.

Usage

import fileDrop from 'file-drops';

const element = document.querySelector('#container');

const dropHandler = fileDrop('Drop a file', function(files) {
  // files = [ { name, contents }, ... ]
});

element.addEventListener('dragover', dropHandler);

Styling

On drop over, the utility will attach the following overlay to the element for which the drop handler got registered:

<div class="drop-overlay">
  <div class="box">
    <div class="label">{label}</div>
  </div>
</div>

Style it as you wish. :heart:

See also

• file-open - simple file open utility

License

MIT

Changelog

All notable changes to file-drops are documented here. We use semantic versioning for releases.

Unreleased

_Note: Yet to be released changes appear here._

0.5.0

• DEPS: update to min-dom@4

0.4.0

• CHORE: provide pre-built UMD distribution

0.3.0

• DOCS: improve documentation
• CHORE: rewrite drop handling
• FIX: unbind all global listeners
• FIX: handle dragleave within drop target
• FIX: attach overlay to drop container

0.2.0

• FEAT: add label class to overlay label

0.1.1

• DOCS: add styling section
• CHORE: add LICENSE file

0.1.0

Initial version.