HTML5 drag & drop for humans
In case you didn't know, the HTML5 drag and drop API is a total disaster! This is an attempt to make the API usable by mere mortals.
Works in the browser with browserify!
npm install drag-drop
var dragDrop = require('drag-drop')
var dropTarget = document.querySelector('#dropTarget')
dragDrop(dropTarget, function (files) {
console.log('Here are the dropped files', files)
})Another handy thing this does is add a drag class to the drop target when the user
is dragging a file over the drop target. Useful for styling the drop target to make
it obvious that this is a drop target!
var dragDrop = require('drag-drop')
// You can pass in a DOM node or a selector string!
dragDrop('#dropTarget', function (files) {
console.log('Here are the dropped files', files)
// `files` is an Array!
files.forEach(function (file) {
// convert the file to a Buffer that we can use!
var reader = new FileReader()
reader.addEventListener('load', function (e) {
// e.target.result is an ArrayBuffer
var arr = new Uint8Array(e.target.result)
var buffer = new Buffer(arr)
// do something with the buffer!
})
reader.addEventListener('error', function (err) {
console.error('FileReader error' + err)
})
reader.readAsArrayBuffer(file)
})
})MIT. Copyright (c) Feross Aboukhadijeh.