├── .gitignore ├── .npmignore ├── test └── basic.js ├── .github ├── dependabot.yml └── workflows │ └── ci.yml ├── buffer.js ├── LICENSE ├── example └── index.html ├── package.json ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | example/drag-drop.js 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | example/ 3 | test/ 4 | -------------------------------------------------------------------------------- /test/basic.js: -------------------------------------------------------------------------------- 1 | const test = require('tape') 2 | 3 | // writing tests for this would be hard, so let's just check that requiring the module 4 | // doesn't throw 5 | 6 | test('requiring drag-drop does not throw', t => { 7 | t.doesNotThrow(() => { 8 | require('../') 9 | }) 10 | t.end() 11 | }) 12 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: / 5 | schedule: 6 | interval: daily 7 | labels: 8 | - dependency 9 | versioning-strategy: increase-if-necessary 10 | - package-ecosystem: github-actions 11 | directory: / 12 | schedule: 13 | interval: daily 14 | labels: 15 | - dependency 16 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 'on': 3 | - push 4 | - pull_request 5 | jobs: 6 | test: 7 | name: Node ${{ matrix.node }} / ${{ matrix.os }} 8 | runs-on: ${{ matrix.os }} 9 | strategy: 10 | fail-fast: false 11 | matrix: 12 | os: 13 | - ubuntu-latest 14 | node: 15 | - '14' 16 | steps: 17 | - uses: actions/checkout@v2 18 | - uses: actions/setup-node@v2 19 | with: 20 | node-version: ${{ matrix.node }} 21 | - run: npm install 22 | - run: npm run build --if-present 23 | - run: npm test 24 | -------------------------------------------------------------------------------- /buffer.js: -------------------------------------------------------------------------------- 1 | module.exports = dragDropAsBuffer 2 | 3 | const dragDrop = require('./') 4 | const parallel = require('run-parallel') 5 | const blobToBuffer = require('blob-to-buffer') 6 | 7 | function dragDropAsBuffer (elem, cb) { 8 | return dragDrop(elem, function (files, pos, fileList) { 9 | const tasks = files.map(function (file) { 10 | return function (cb) { 11 | blobToBuffer(file, function (err, buffer) { 12 | if (err) return cb(err) 13 | buffer.name = file.name 14 | buffer.fullPath = file.fullPath 15 | buffer.size = file.size 16 | buffer.type = file.type 17 | buffer.lastModifiedDate = file.lastModifiedDate 18 | cb(null, buffer) 19 | }) 20 | } 21 | }) 22 | parallel(tasks, function (err, results) { 23 | if (err) throw err 24 | cb(results, pos, fileList) 25 | }) 26 | }) 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Feross Aboukhadijeh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | drag-drop example 4 | 12 | 13 | 14 |

Drag something onto this page

15 | 16 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drag-drop", 3 | "description": "HTML5 drag & drop for humans", 4 | "version": "7.2.0", 5 | "author": { 6 | "name": "Feross Aboukhadijeh", 7 | "email": "feross@feross.org", 8 | "url": "https://feross.org" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/feross/drag-drop/issues" 12 | }, 13 | "dependencies": { 14 | "blob-to-buffer": "^1.2.9", 15 | "run-parallel": "^1.2.0" 16 | }, 17 | "devDependencies": { 18 | "babel-minify": "^0.5.1", 19 | "browserify": "^17.0.0", 20 | "ecstatic": "^4.1.4", 21 | "standard": "*", 22 | "tape": "^5.2.2" 23 | }, 24 | "homepage": "https://github.com/feross/drag-drop", 25 | "keywords": [ 26 | "drag", 27 | "drop", 28 | "dnd", 29 | "drag and drop", 30 | "drag drop", 31 | "html5", 32 | "drag & drop", 33 | "frontend", 34 | "browserify" 35 | ], 36 | "license": "MIT", 37 | "main": "index.js", 38 | "repository": { 39 | "type": "git", 40 | "url": "git://github.com/feross/drag-drop.git" 41 | }, 42 | "scripts": { 43 | "example": "browserify -s DragDrop -r . > example/drag-drop.js && ecstatic example --port 4000", 44 | "size": "browserify -s DragDrop -r . | minify | gzip | wc -c", 45 | "test": "standard && tape test/*.js" 46 | }, 47 | "funding": [ 48 | { 49 | "type": "github", 50 | "url": "https://github.com/sponsors/feross" 51 | }, 52 | { 53 | "type": "patreon", 54 | "url": "https://www.patreon.com/feross" 55 | }, 56 | { 57 | "type": "consulting", 58 | "url": "https://feross.org/support" 59 | } 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # drag-drop [![ci][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url] 2 | 3 | [ci-image]: https://img.shields.io/github/workflow/status/feross/drag-drop/ci/master 4 | [ci-url]: https://github.com/feross/drag-drop/actions 5 | [npm-image]: https://img.shields.io/npm/v/drag-drop.svg 6 | [npm-url]: https://npmjs.org/package/drag-drop 7 | [downloads-image]: https://img.shields.io/npm/dm/drag-drop.svg 8 | [downloads-url]: https://npmjs.org/package/drag-drop 9 | [standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg 10 | [standard-url]: https://standardjs.com 11 | 12 | ### HTML5 drag & drop for humans 13 | 14 | In case you didn't know, the 15 | [HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) 16 | is a 17 | [total disaster](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html)! 18 | This is an attempt to make the API usable by mere mortals. 19 | 20 | ### live demo 21 | 22 | See [https://instant.io](https://instant.io). 23 | 24 | ### features 25 | 26 | - simple API 27 | - supports files and directories 28 | - excellent browser support (Chrome, Firefox, Safari, Edge) 29 | - adds a `drag` class to the drop target on hover, for easy styling! 30 | - optionally, get the file(s) as a Buffer (see [buffer](https://github.com/feross/buffer)) 31 | 32 | ### install 33 | 34 | ``` 35 | npm install drag-drop 36 | ``` 37 | 38 | This package works in the browser with [browserify](https://browserify.org). If you do not use a bundler, you can use the [standalone script](https://bundle.run/drag-drop) directly in a `