@drawbotics/file-uploader - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

lib/components/FileUploader.js

@@ -74,2 +74,4 @@ import "core-js/modules/es6.array.from";
     _this._handleOnChange = _this._handleOnChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this._handleOnDrop = _this._handleOnDrop.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this._handleOnDragEnter = _this._handleOnDragEnter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     return _this;
@@ -90,10 +92,40 @@ }
           sanitize = _this$props.sanitize,
-          rest = _objectWithoutProperties(_this$props, ["signingUrl", "onInit", "onStart", "onProgress", "onFinish", "onError", "onComplete", "sanitize"]);
+          enableDragDrop = _this$props.enableDragDrop,
+          className = _this$props.className,
+          onDragEnter = _this$props.onDragEnter,
+          onDragLeave = _this$props.onDragLeave,
+          children = _this$props.children,
+          rest = _objectWithoutProperties(_this$props, ["signingUrl", "onInit", "onStart", "onProgress", "onFinish", "onError", "onComplete", "sanitize", "enableDragDrop", "className", "onDragEnter", "onDragLeave", "children"]);
 
-      return React.createElement("input", _extends({}, rest, {
-        onChange: this._handleOnChange,
-        type: "file"
-      }));
+      if (!enableDragDrop) {
+        return React.createElement("input", _extends({}, rest, {
+          onChange: this._handleOnChange,
+          type: "file"
+        }));
+      } else {
+        return React.createElement("div", {
+          className: className,
+          onDragOver: function onDragOver(e) {
+            return e.preventDefault();
+          },
+          onDragEnter: this._handleOnDragEnter,
+          onDragLeave: onDragLeave,
+          onDrop: this._handleOnDrop
+        }, children, React.createElement("input", _extends({}, rest, {
+          onChange: this._handleOnChange,
+          type: "file"
+        })));
+      }
     }
   }, {
+    key: "_handleOnDragEnter",
+    value: function _handleOnDragEnter(e) {
+      (function (e) {
+        return e.preventDefault();
+      });
+
+      var onDragEnter = this.props.onDragEnter;
+      onDragEnter();
+    }
+  }, {
     key: "_handleOnChange",
@@ -104,11 +136,68 @@ value: function () {
       regeneratorRuntime.mark(function _callee(e) {
+        var files;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                files = e.target.files;
+                _context.next = 3;
+                return this._uploadFiles(files);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      return function _handleOnChange(_x) {
+        return _handleOnChange2.apply(this, arguments);
+      };
+    }()
+  }, {
+    key: "_handleOnDrop",
+    value: function () {
+      var _handleOnDrop2 = _asyncToGenerator(
+      /*#__PURE__*/
+      regeneratorRuntime.mark(function _callee2(e) {
+        var onDragLeave, files;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                e.preventDefault();
+                e.stopPropagation();
+                onDragLeave = this.props.onDragLeave;
+                onDragLeave();
+                files = e.dataTransfer.files;
+                _context2.next = 7;
+                return this._uploadFiles(files);
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      return function _handleOnDrop(_x2) {
+        return _handleOnDrop2.apply(this, arguments);
+      };
+    }()
+  }, {
+    key: "_uploadFiles",
+    value: function () {
+      var _uploadFiles2 = _asyncToGenerator(
+      /*#__PURE__*/
+      regeneratorRuntime.mark(function _callee3(files) {
         var _this2 = this;
 
-        var files, _this$props2, onInit, onComplete, promises, uploadedFiles;
+        var _this$props2, onInit, onComplete, promises, uploadedFiles;
 
-        return regeneratorRuntime.wrap(function _callee$(_context) {
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
-                files = e.target.files;
                 _this$props2 = this.props, onInit = _this$props2.onInit, onComplete = _this$props2.onComplete;
@@ -119,19 +208,19 @@ onInit ? onInit(files) : null;
                 });
-                _context.next = 6;
+                _context3.next = 5;
                 return Promise.all(promises);
 
-              case 6:
-                uploadedFiles = _context.sent;
+              case 5:
+                uploadedFiles = _context3.sent;
                 onComplete ? onComplete(uploadedFiles) : null;
 
-              case 8:
+              case 7:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
 
-      return function _handleOnChange(_x) {
-        return _handleOnChange2.apply(this, arguments);
+      return function _uploadFiles(_x3) {
+        return _uploadFiles2.apply(this, arguments);
       };
@@ -144,8 +233,8 @@ }()
       /*#__PURE__*/
-      regeneratorRuntime.mark(function _callee2(file) {
+      regeneratorRuntime.mark(function _callee4(file) {
         var _this$props3, signingUrl, onStart, _onProgress, onFinish, onError, _sanitize, result, signingResult, uploadResult;
 
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
@@ -156,4 +245,4 @@ _this$props3 = this.props, signingUrl = _this$props3.signingUrl, onStart = _this$props3.onStart, _onProgress = _this$props3.onProgress, onFinish = _this$props3.onFinish, onError = _this$props3.onError, _sanitize = _this$props3.sanitize;
                 signingResult = null;
-                _context2.prev = 4;
-                _context2.next = 7;
+                _context4.prev = 4;
+                _context4.next = 7;
                 return uploadFile(file, signingUrl, {
@@ -169,16 +258,16 @@ sanitize: function sanitize(name) {
               case 7:
-                uploadResult = _context2.sent;
+                uploadResult = _context4.sent;
                 result = uploadResult.result;
                 signingResult = uploadResult.signingResult;
-                _context2.next = 15;
+                _context4.next = 15;
                 break;
 
               case 12:
-                _context2.prev = 12;
-                _context2.t0 = _context2["catch"](4);
-                onError ? onError(file, _context2.t0) : null;
+                _context4.prev = 12;
+                _context4.t0 = _context4["catch"](4);
+                onError ? onError(file, _context4.t0) : null;
 
               case 15:
                 onFinish ? onFinish(file, signingResult, result) : null;
-                return _context2.abrupt("return", {
+                return _context4.abrupt("return", {
                   file: file,
@@ -191,9 +280,9 @@ signingResult: signingResult,
               case "end":
-                return _context2.stop();
+                return _context4.stop();
             }
           }
-        }, _callee2, this, [[4, 12]]);
+        }, _callee4, this, [[4, 12]]);
       }));
 
-      return function _uploadFile(_x2) {
+      return function _uploadFile(_x4) {
         return _uploadFile2.apply(this, arguments);
@@ -251,3 +340,24 @@ };
    */
-  sanitize: PropTypes.func
+  sanitize: PropTypes.func,
+
+  /**
+   * Boolean that toggles between the drag-and-drop enabled version,
+   * and the simpler, backwards compatible one.
+   */
+  enableDragDrop: PropTypes.bool,
+
+  /**
+   * Optional class name that can be passed to override the drop zone container's style
+   */
+  className: PropTypes.string,
+
+  /**
+   * Call back that is triggered on dragEnter
+   */
+  onDragEnter: PropTypes.func,
+
+  /**
+   * Callback that is triggered on dragLeave
+   */
+  onDragLeave: PropTypes.func
 });
@@ -254,0 +364,0 @@

package.json

 {
   "name": "@drawbotics/file-uploader",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Small React component to upload files using active storage",
@@ -5,0 +5,0 @@ "license": "UNLICENSED",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

320252

increased by2.35%

Lines of code

918

increased by13.05%

Worsened metrics

Number of medium supply chain risk alerts

5

increased by25%

No dependency changes