drag-drop

drag-drop

Unfuck the HTML5 drag & drop API

Also works in the browser with browserify!

install

npm install drag-drop

usage

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!

a more complete example

var dragDrop = require('drag-drop')
var dropTarget = document.querySelector('#dropTarget')

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)
  })
})

license

MIT. Copyright (c) Feross Aboukhadijeh.