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.
This module works in the browser with browserify and it's used by WebTorrent!
Note: If you're not using browserify, then use the included standalone file
dragdrop.bundle.js. This exports a DragDrop function on window.
- simple API
- adds a
dragclass to the drop target on hover, for easy styling! - optionally, get the file(s) as a Buffer (see buffer)
npm install drag-drop
vardragDrop=require('drag-drop')dragDrop('#dropTarget',function(files,pos){console.log('Here are the dropped files',files)console.log('Dropped at coordinates',pos.x,pos.y)})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!
vardragDrop=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){console.log(file.name)console.log(file.size)console.log(file.type)console.log(file.lastModifiedData)// convert the file to a Buffer that we can use!varreader=newFileReader()reader.addEventListener('load',function(e){// e.target.result is an ArrayBuffervararr=newUint8Array(e.target.result)varbuffer=newBuffer(arr)// do something with the buffer!})reader.addEventListener('error',function(err){console.error('FileReader error'+err)})reader.readAsArrayBuffer(file)})})If you prefer to access file data as Buffers, then just require drag-drop like this:
vardragDrop=require('drag-drop/buffer')dragDrop('#dropTarget',function(files){files.forEach(function(file){// file is actually a buffer!console.log(file.readUInt32LE(0))console.log(file.toJSON())console.log(file.toString('hex'))// etc...// but it still has all the normal file properties!console.log(file.name)console.log(file.size)console.log(file.type)console.log(file.lastModifiedDate)})}MIT. Copyright (c) Feross Aboukhadijeh.