drag-drop - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

buffer.js

@@ -8,3 +8,3 @@ module.exports = dragDropAsBuffer
 function dragDropAsBuffer (elem, cb) {
-  return dragDrop(elem, function (files, pos) {
+  return dragDrop(elem, function (files, pos, fileList) {
     var tasks = files.map(function (file) {
@@ -25,5 +25,5 @@ return function (cb) {
       if (err) throw err
-      cb(results, pos)
+      cb(results, pos, fileList)
     })
   })
 }

dragdrop.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).DragDrop=e()}}(function(){return function a(i,f,u){function d(r,e){if(!f[r]){if(!i[r]){var n="function"==typeof require&&require;if(!e&&n)return n(r,!0);if(s)return s(r,!0);var t=new Error("Cannot find module '"+r+"'");throw t.code="MODULE_NOT_FOUND",t}var o=f[r]={exports:{}};i[r][0].call(o.exports,function(e){return d(i[r][1][e]||e)},o,o.exports,a,i,f,u)}return f[r].exports}for(var s="function"==typeof require&&require,e=0;e<u.length;e++)d(u[e]);return d}({"/":[function(e,r,n){r.exports=function(o,i){if("string"==typeof o){var e=o;if(!(o=window.document.querySelector(o)))throw new Error('"'+e+'" does not match any HTML elements')}if(!o)throw new Error('"'+o+'" is not a valid HTML element');"function"==typeof i&&(i={onDrop:i});var f;return o.addEventListener("dragenter",r,!1),o.addEventListener("dragover",n,!1),o.addEventListener("dragleave",t,!1),o.addEventListener("drop",a,!1),function(){u(),o.removeEventListener("dragenter",r,!1),o.removeEventListener("dragover",n,!1),o.removeEventListener("dragleave",t,!1),o.removeEventListener("drop",a,!1)};function r(e){return i.onDragEnter&&i.onDragEnter(e),e.stopPropagation(),e.preventDefault(),!1}function n(e){if(e.stopPropagation(),e.preventDefault(),e.dataTransfer.items){var r=Array.from(e.dataTransfer.items),n=r.filter(function(e){return"file"===e.kind}),t=r.filter(function(e){return"string"===e.kind});if(0===n.length&&!i.onDropText)return;if(0===t.length&&!i.onDrop)return;if(0===n.length&&0===t.length)return}return o.classList.add("drag"),clearTimeout(f),i.onDragOver&&i.onDragOver(e),!(e.dataTransfer.dropEffect="copy")}function t(e){return e.stopPropagation(),e.preventDefault(),i.onDragLeave&&i.onDragLeave(e),clearTimeout(f),f=setTimeout(u,50),!1}function a(e){e.stopPropagation(),e.preventDefault(),i.onDragLeave&&i.onDragLeave(e),clearTimeout(f),u();var r={x:e.clientX,y:e.clientY},n=e.dataTransfer.getData("text");if(n&&i.onDropText&&i.onDropText(n,r),e.dataTransfer.files){for(var t=e.dataTransfer.files,o=0;o<t.length;++o){var a=t[o];a.fullPath="/"+a.name}i.onDrop&&0<t.length&&i.onDrop(t,r)}return!1}function u(){o.classList.remove("drag")}}},{}]},{},[])("/")});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).DragDrop=e()}}(function(){return function i(u,a,f){function c(n,e){if(!a[n]){if(!u[n]){var t="function"==typeof require&&require;if(!e&&t)return t(n,!0);if(l)return l(n,!0);var r=new Error("Cannot find module '"+n+"'");throw r.code="MODULE_NOT_FOUND",r}var o=a[n]={exports:{}};u[n][0].call(o.exports,function(e){return c(u[n][1][e]||e)},o,o.exports,i,u,a,f)}return a[n].exports}for(var l="function"==typeof require&&require,e=0;e<f.length;e++)c(f[e]);return c}({1:[function(e,n,t){n.exports=function(e,o){return(o="number"==typeof o?o:1/0)?function t(e,r){return e.reduce(function(e,n){return Array.isArray(n)&&r<o?e.concat(t(n,r+1)):e.concat(n)},[])}(e,1):Array.isArray(e)?e.map(function(e){return e}):e}},{}],2:[function(e,n,t){var r,o,i=n.exports={};function u(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function f(n){if(r===setTimeout)return setTimeout(n,0);if((r===u||!r)&&setTimeout)return r=setTimeout,setTimeout(n,0);try{return r(n,0)}catch(e){try{return r.call(null,n,0)}catch(e){return r.call(this,n,0)}}}!function(){try{r="function"==typeof setTimeout?setTimeout:u}catch(e){r=u}try{o="function"==typeof clearTimeout?clearTimeout:a}catch(e){o=a}}();var c,l=[],s=!1,d=-1;function p(){s&&c&&(s=!1,c.length?l=c.concat(l):d=-1,l.length&&v())}function v(){if(!s){var e=f(p);s=!0;for(var n=l.length;n;){for(c=l,l=[];++d<n;)c&&c[d].run();d=-1,n=l.length}c=null,s=!1,function(n){if(o===clearTimeout)return clearTimeout(n);if((o===a||!o)&&clearTimeout)return o=clearTimeout,clearTimeout(n);try{o(n)}catch(e){try{return o.call(null,n)}catch(e){return o.call(this,n)}}}(e)}}function h(e,n){this.fun=e,this.array=n}function m(){}i.nextTick=function(e){var n=new Array(arguments.length-1);if(1<arguments.length)for(var t=1;t<arguments.length;t++)n[t-1]=arguments[t];l.push(new h(e,n)),1!==l.length||s||f(v)},h.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=m,i.addListener=m,i.once=m,i.off=m,i.removeListener=m,i.removeAllListeners=m,i.emit=m,i.prependListener=m,i.prependOnceListener=m,i.listeners=function(e){return[]},i.binding=function(e){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(e){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},{}],3:[function(e,n,t){(function(f){n.exports=function(e,t){var r,o,n,i=!0;function u(e){function n(){t&&t(e,r),t=null}i?f.nextTick(n):n()}function a(e,n,t){r[e]=t,(0==--o||n)&&u(n)}Array.isArray(e)?(r=[],o=e.length):(n=Object.keys(e),r={},o=n.length),o?n?n.forEach(function(t){e[t](function(e,n){a(t,e,n)})}):e.forEach(function(e,t){e(function(e,n){a(t,e,n)})}):u(null),i=!1}}).call(this,e("_process"))},{_process:2}],"/":[function(e,n,t){n.exports=function(o,i){if("string"==typeof o){var e=o;if(!(o=window.document.querySelector(o)))throw new Error('"'+e+'" does not match any HTML elements')}if(!o)throw new Error('"'+o+'" is not a valid HTML element');"function"==typeof i&&(i={onDrop:i});var u;return o.addEventListener("dragenter",n,!1),o.addEventListener("dragover",t,!1),o.addEventListener("dragleave",r,!1),o.addEventListener("drop",a,!1),function(){f(),o.removeEventListener("dragenter",n,!1),o.removeEventListener("dragover",t,!1),o.removeEventListener("dragleave",r,!1),o.removeEventListener("drop",a,!1)};function n(e){return i.onDragEnter&&i.onDragEnter(e),e.stopPropagation(),e.preventDefault(),!1}function t(e){if(e.stopPropagation(),e.preventDefault(),e.dataTransfer.items){var n=Array.from(e.dataTransfer.items),t=n.filter(function(e){return"file"===e.kind}),r=n.filter(function(e){return"string"===e.kind});if(0===t.length&&!i.onDropText)return;if(0===r.length&&!i.onDrop)return;if(0===t.length&&0===r.length)return}return o.classList.add("drag"),clearTimeout(u),i.onDragOver&&i.onDragOver(e),!(e.dataTransfer.dropEffect="copy")}function r(e){return e.stopPropagation(),e.preventDefault(),i.onDragLeave&&i.onDragLeave(e),clearTimeout(u),u=setTimeout(f,50),!1}function a(e){e.stopPropagation(),e.preventDefault(),i.onDragLeave&&i.onDragLeave(e),clearTimeout(u),f();var t={x:e.clientX,y:e.clientY},n=e.dataTransfer.getData("text");if(n&&i.onDropText&&i.onDropText(n,t),i.onDrop&&e.dataTransfer.items){var r=e.dataTransfer.files,o=Array.from(e.dataTransfer.items).filter(function(e){return"file"===e.kind});if(0===o.length)return;l(o.map(function(n){return function(e){!function(n,t){var r=[];if(n.isFile)n.file(function(e){e.fullPath=n.fullPath,t(null,e)},function(e){t(e)});else if(n.isDirectory){var e=n.createReader();!function n(){e.readEntries(function(e){0<e.length?(r=r.concat(Array.from(e)),n()):l(r.map(function(n){return function(e){s(n,e)}}),t)})}()}}(n.webkitGetAsEntry(),e)}}),function(e,n){if(e)throw e;i.onDrop(c(n),t,r)})}return!1}function f(){o.classList.remove("drag")}};var c=e("flatten"),l=e("run-parallel");function s(n,t){var r=[];if(n.isFile){n.file(function(e){e.fullPath=n.fullPath;t(null,e)},function(e){t(e)})}else if(n.isDirectory){var e=n.createReader();o()}function o(){e.readEntries(function(e){if(e.length>0){r=r.concat(Array.from(e));o()}else{i()}})}function i(){l(r.map(function(n){return function(e){s(n,e)}}),t)}}},{flatten:1,"run-parallel":3}]},{},[])("/")});

index.js

 module.exports = dragDrop
 
+var flatten = require('flatten')
+var parallel = require('run-parallel')
+
 function dragDrop (elem, listeners) {
@@ -109,14 +112,26 @@ if (typeof elem === 'string') {
 
-    // file drop support
-    if (e.dataTransfer.files) {
-      var files = e.dataTransfer.files
+    // File drop support. The `dataTransfer.items` API supports directories, so we
+    // use it instead of `dataTransfer.files`, even though it's much more
+    // complicated to use.
+    // See: https://github.com/feross/drag-drop/issues/39
+    if (listeners.onDrop && e.dataTransfer.items) {
+      var fileList = e.dataTransfer.files
 
-      for (var i = 0; i < files.length; ++i) {
-        var file = files[i]
-        file.fullPath = '/' + file.name
-      }
+      // Handle directories in Chrome using the proprietary FileSystem API
+      var items = Array.from(e.dataTransfer.items).filter(function (item) {
+        return item.kind === 'file'
+      })
 
-      if (listeners.onDrop && files.length > 0) {
-        listeners.onDrop(files, pos)
-      }
+      if (items.length === 0) return
+
+      parallel(items.map(function (item) {
+        return function (cb) {
+          processEntry(item.webkitGetAsEntry(), cb)
+        }
+      }), function (err, results) {
+        // This catches permission errors with file:// in Chrome. This should never
+        // throw in production code, so the user does not need to use try-catch.
+        if (err) throw err
+        listeners.onDrop(flatten(results), pos, fileList)
+      })
     }
@@ -131,1 +146,36 @@
 }
+
+function processEntry (entry, cb) {
+  var entries = []
+
+  if (entry.isFile) {
+    entry.file(function (file) {
+      file.fullPath = entry.fullPath // preserve pathing for consumer
+      cb(null, file)
+    }, function (err) {
+      cb(err)
+    })
+  } else if (entry.isDirectory) {
+    var reader = entry.createReader()
+    readEntries()
+  }
+
+  function readEntries () {
+    reader.readEntries(function (entries_) {
+      if (entries_.length > 0) {
+        entries = entries.concat(Array.from(entries_))
+        readEntries() // continue reading entries until `readEntries` returns no more
+      } else {
+        doneEntries()
+      }
+    })
+  }
+
+  function doneEntries () {
+    parallel(entries.map(function (entry) {
+      return function (cb) {
+        processEntry(entry, cb)
+      }
+    }), cb)
+  }
+}

package.json

 {
   "name": "drag-drop",
   "description": "HTML5 drag & drop for humans",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "author": "Feross Aboukhadijeh <[e-mail]> (http://feross.org/)",
@@ -10,3 +10,5 @@ "bugs": {
   "dependencies": {
-    "blob-to-buffer": "^1.0.2"
+    "blob-to-buffer": "^1.0.2",
+    "flatten": "^1.0.2",
+    "run-parallel": "^1.0.0"
   },
@@ -13,0 +15,0 @@ "devDependencies": {

README.md

@@ -32,5 +32,6 @@ # drag-drop [![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]
 - simple API
+- supports files and directories
+- supports modern browsers (Chrome, Firefox, Safari, Edge)
 - adds a `drag` class to the drop target on hover, for easy styling!
 - optionally, get the file(s) as a Buffer (see [buffer](https://github.com/feross/buffer))
-- supports modern browsers (Chrome, Firefox, Safari, Edge)
 
@@ -48,5 +49,6 @@ ### install
 
-dragDrop('#dropTarget', function (files, pos) {
-  console.log('Here is the dropped FileList', files)
+dragDrop('#dropTarget', function (files, pos, fileList) {
+  console.log('Here are the dropped files', files) // Array of File objects
   console.log('Dropped at coordinates', pos.x, pos.y)
+  console.log('Here is the raw FileList object if you need it:', fileList)
 })
@@ -65,8 +67,8 @@ ```
 // You can pass in a DOM node or a selector string!
-dragDrop('#dropTarget', function (files) {
-  console.log('Here is the dropped FileList', files)
+dragDrop('#dropTarget', function (files, pos, fileList) {
+  console.log('Here are the dropped files', files)
+  console.log('Dropped at coordinates', pos.x, pos.y)
+  console.log('Here is the raw FileList object if you need it:', fileList)
 
-  // `files` is a FileList, so convert it to an Array!
-  files = Array.from(files)
-
+  // `files` is an Array!
   files.forEach(function (file) {
@@ -105,3 +107,2 @@ console.log(file.name)
 dragDrop('#dropTarget', function (files) {
-  files = Array.from(files)
   files.forEach(function (file) {
@@ -130,5 +131,4 @@ // file is actually a buffer!
 
-var remove = dragDrop('#dropTarget', function (files, pos) {
-  console.log('Here is the dropped FileList', files)
-  console.log('Dropped at coordinates', pos.x, pos.y)
+var remove = dragDrop('#dropTarget', function (files) {
+  // ...
 })
@@ -149,5 +149,6 @@
 dragDrop('#dropTarget', {
-  onDrop: function (files, pos) {
-    console.log('Here is the dropped FileList', files)
+  onDrop: function (files, pos, fileList) {
+    console.log('Here are the dropped files', files)
     console.log('Dropped at coordinates', pos.x, pos.y)
+    console.log('Here is the raw FileList object if you need it:', fileList)
   },
@@ -169,5 +170,6 @@ onDragEnter: function () {},
 dragDrop('#dropTarget', {
-  onDropText: function (text, pos) {
-    console.log('Here is the dropped text', text)
+  onDropText: function (text, pos, fileList) {
+    console.log('Here are the dropped files', files)
     console.log('Dropped at coordinates', pos.x, pos.y)
+    console.log('Here is the raw FileList object if you need it:', fileList)
   }
@@ -174,0 +176,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20262

increased by33.6%

Lines of code

202

increased by38.36%

Number of lines in readme file

183

increased by1.1%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedflatten@^1.0.2

• + Addedrun-parallel@^1.0.0

• + Addedflatten@1.0.3(transitive)

• + Addedqueue-microtask@1.2.3(transitive)

• + Addedrun-parallel@1.2.0(transitive)