Package Exports
- drag-drop
- drag-drop/buffer
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (drag-drop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
drag-drop 
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.
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.
features
- simple API
- adds a
dragclass to the drop target on hover, for easy styling! - optionally, get the file(s) as a Buffer (see buffer)
install
npm install drag-dropusage
var dragDrop = require('drag-drop')
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')
// 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!
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)
})
})get files as buffers
If you prefer to access file data as Buffers, then just require drag-drop like this:
var dragDrop = require('drag-drop/buffer')
dragDrop('#dropTarget', function (files) {
files.forEach(function (file) {
console.log(file.name)
console.log(file.size)
console.log(file.type)
console.log(file.lastModifiedDate)
console.log(file.buffer) // this is a Buffer!
})
}
license
MIT. Copyright (c) Feross Aboukhadijeh.