Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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.
Note: If you do not use browserify, use the included standalone file
dragdrop.min.js
. This exports a DragDrop
function on window
.
See https://instant.io.
drag
class to the drop target on hover, for easy styling!npm install drag-drop
var dragDrop = 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!
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)
console.log(file.fullPath) // not real full path due to browser security restrictions
console.log(file.path) // in Electron, this contains the actual full path
// 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)
})
})
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) {
// 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)
})
}
To stop listening for drag & drop events and remove the event listeners, just use the
remove
function returned by the dragDrop
function.
var dragDrop = require('drag-drop')
var remove = dragDrop('#dropTarget', function (files, pos) {
console.log('Here are the dropped files', files)
console.log('Dropped at coordinates', pos.x, pos.y)
})
// ... at some point in the future, stop listening for drag & drop events
remove()
dragenter
, dragover
and dragleave
eventsInstead of passing just an ondrop
function as the second argument, instead pass an
object with all the events you want to listen for:
var dragDrop = require('drag-drop')
dragDrop('#dropTarget', {
onDrop: function (files, pos) {
console.log('Here are the dropped files', files)
console.log('Dropped at coordinates', pos.x, pos.y)
},
onDragEnter: function () {},
onDragOver: function () {},
onDragLeave: function () {}
})
If the user highlights text and drags it, we capture that as a separate event. Listen for it like this:
var dragDrop = require('drag-drop')
dragDrop('#dropTarget', {
onDropText: function (text, pos) {
console.log('Here is the dropped text', text)
console.log('Dropped at coordinates', pos.x, pos.y)
}
})
file://
urlsDon't run your app from file://
. For security reasons, browsers do not allow you to
run your app from file://
. In fact, many of the powerful storage APIs throw errors
if you run the app locally from file://
.
Instead, start a local server and visit your site at http://localhost:port
.
MIT. Copyright (c) Feross Aboukhadijeh.
FAQs
HTML5 drag & drop for humans
The npm package drag-drop receives a total of 14,739 weekly downloads. As such, drag-drop popularity was classified as popular.
We found that drag-drop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.