@uppy/drag-drop - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

CHANGELOG.md

 # @uppy/drag-drop
 
+## 3.1.0
+
+Released: 2024-03-27
+Included in: Uppy v3.24.0
+
+- @uppy/drag-drop: refine type of private variables (Antoine du Hamel / #5026)
+- @uppy/drag-drop,@uppy/progress-bar: add missing exports (Antoine du Hamel / #5009)
+- @uppy/drag-drop: refactor to TypeScript (Antoine du Hamel / #4983)
+
 ## 3.0.1
@@ -4,0 +13,0 @@

lib/DragDrop.js

@@ -6,6 +6,15 @@ import { UIPlugin } from '@uppy/core';
 import { h } from 'preact';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 const packageJson = {
-  "version": "3.0.3"
+  "version": "3.1.0"
 };
-import locale from './locale.js';
+import locale from "./locale.js";
+// Default options, must be kept in sync with @uppy/react/src/DragDrop.js.
+const defaultOptions = {
+  inputName: 'files[]',
+  width: '100%',
+  height: '100%'
+};
 
@@ -18,5 +27,91 @@ /**
   constructor(uppy, opts) {
-    super(uppy, opts);
+    super(uppy, {
+      ...defaultOptions,
+      ...opts
+    });
+    // Check for browser dragDrop support
+    this.isDragDropSupported = isDragDropSupported();
+    this.addFiles = files => {
+      const descriptors = files.map(file => ({
+        source: this.id,
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          // path of the file relative to the ancestor directory the user selected.
+          // e.g. 'docs/Old Prague/airbnb.pdf'
+          relativePath: file.relativePath || null
+        }
+      }));
+      try {
+        this.uppy.addFiles(descriptors);
+      } catch (err) {
+        this.uppy.log(err);
+      }
+    };
+    this.onInputChange = event => {
+      const files = toArray(event.target.files);
+      if (files.length > 0) {
+        this.uppy.log('[DragDrop] Files selected through input');
+        this.addFiles(files);
+      }
+
+      // We clear the input after a file is selected, because otherwise
+      // change event is not fired in Chrome and Safari when a file
+      // with the same name is selected.
+      // ___Why not use value="" on <input/> instead?
+      //    Because if we use that method of clearing the input,
+      //    Chrome will not trigger change if we drop the same file twice (Issue #768).
+      // @ts-expect-error TS freaks out, but this is fine
+      // eslint-disable-next-line no-param-reassign
+      event.target.value = null;
+    };
+    this.handleDragOver = event => {
+      var _this$opts$onDragOver, _this$opts;
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Check if the "type" of the datatransfer object includes files. If not, deny drop.
+      const {
+        types
+      } = event.dataTransfer;
+      const hasFiles = types.some(type => type === 'Files');
+      const {
+        allowNewUpload
+      } = this.uppy.getState();
+      if (!hasFiles || !allowNewUpload) {
+        // eslint-disable-next-line no-param-reassign
+        event.dataTransfer.dropEffect = 'none';
+        clearTimeout(this.removeDragOverClassTimeout);
+        return;
+      }
+
+      // Add a small (+) icon on drop
+      // (and prevent browsers from interpreting this as files being _moved_ into the browser
+      // https://github.com/transloadit/uppy/issues/1978)
+      //
+      // eslint-disable-next-line no-param-reassign
+      event.dataTransfer.dropEffect = 'copy';
+      clearTimeout(this.removeDragOverClassTimeout);
+      this.setPluginState({
+        isDraggingOver: true
+      });
+      (_this$opts$onDragOver = (_this$opts = this.opts).onDragOver) == null || _this$opts$onDragOver.call(_this$opts, event);
+    };
+    this.handleDragLeave = event => {
+      var _this$opts$onDragLeav, _this$opts2;
+      event.preventDefault();
+      event.stopPropagation();
+      clearTimeout(this.removeDragOverClassTimeout);
+      // Timeout against flickering, this solution is taken from drag-drop library.
+      // Solution with 'pointer-events: none' didn't work across browsers.
+      this.removeDragOverClassTimeout = setTimeout(() => {
+        this.setPluginState({
+          isDraggingOver: false
+        });
+      }, 50);
+      (_this$opts$onDragLeav = (_this$opts2 = this.opts).onDragLeave) == null || _this$opts$onDragLeav.call(_this$opts2, event);
+    };
     this.handleDrop = async event => {
-      var _this$opts$onDrop, _this$opts;
+      var _this$opts$onDrop, _this$opts3;
       event.preventDefault();
@@ -42,3 +137,3 @@ event.stopPropagation();
       }
-      (_this$opts$onDrop = (_this$opts = this.opts).onDrop) == null ? void 0 : _this$opts$onDrop.call(_this$opts, event);
+      (_this$opts$onDrop = (_this$opts3 = this.opts).onDrop) == null || _this$opts$onDrop.call(_this$opts3, event);
     };
@@ -49,111 +144,4 @@ this.type = 'acquirer';
     this.defaultLocale = locale;
-
-    // Default options, must be kept in sync with @uppy/react/src/DragDrop.js.
-    const defaultOpts = {
-      target: null,
-      inputName: 'files[]',
-      width: '100%',
-      height: '100%',
-      note: null
-    };
-
-    // Merge default options with the ones set by user
-    this.opts = {
-      ...defaultOpts,
-      ...opts
-    };
     this.i18nInit();
-
-    // Check for browser dragDrop support
-    this.isDragDropSupported = isDragDropSupported();
-    this.removeDragOverClassTimeout = null;
-
-    // Bind `this` to class methods
-    this.onInputChange = this.onInputChange.bind(this);
-    this.handleDragOver = this.handleDragOver.bind(this);
-    this.handleDragLeave = this.handleDragLeave.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-    this.addFiles = this.addFiles.bind(this);
-    this.render = this.render.bind(this);
   }
-  addFiles(files) {
-    const descriptors = files.map(file => ({
-      source: this.id,
-      name: file.name,
-      type: file.type,
-      data: file,
-      meta: {
-        // path of the file relative to the ancestor directory the user selected.
-        // e.g. 'docs/Old Prague/airbnb.pdf'
-        relativePath: file.relativePath || null
-      }
-    }));
-    try {
-      this.uppy.addFiles(descriptors);
-    } catch (err) {
-      this.uppy.log(err);
-    }
-  }
-  onInputChange(event) {
-    const files = toArray(event.target.files);
-    if (files.length > 0) {
-      this.uppy.log('[DragDrop] Files selected through input');
-      this.addFiles(files);
-    }
-
-    // We clear the input after a file is selected, because otherwise
-    // change event is not fired in Chrome and Safari when a file
-    // with the same name is selected.
-    // ___Why not use value="" on <input/> instead?
-    //    Because if we use that method of clearing the input,
-    //    Chrome will not trigger change if we drop the same file twice (Issue #768).
-    // eslint-disable-next-line no-param-reassign
-    event.target.value = null;
-  }
-  handleDragOver(event) {
-    var _this$opts$onDragOver, _this$opts2;
-    event.preventDefault();
-    event.stopPropagation();
-
-    // Check if the "type" of the datatransfer object includes files. If not, deny drop.
-    const {
-      types
-    } = event.dataTransfer;
-    const hasFiles = types.some(type => type === 'Files');
-    const {
-      allowNewUpload
-    } = this.uppy.getState();
-    if (!hasFiles || !allowNewUpload) {
-      // eslint-disable-next-line no-param-reassign
-      event.dataTransfer.dropEffect = 'none';
-      clearTimeout(this.removeDragOverClassTimeout);
-      return;
-    }
-
-    // Add a small (+) icon on drop
-    // (and prevent browsers from interpreting this as files being _moved_ into the browser
-    // https://github.com/transloadit/uppy/issues/1978)
-    //
-    // eslint-disable-next-line no-param-reassign
-    event.dataTransfer.dropEffect = 'copy';
-    clearTimeout(this.removeDragOverClassTimeout);
-    this.setPluginState({
-      isDraggingOver: true
-    });
-    (_this$opts$onDragOver = (_this$opts2 = this.opts).onDragOver) == null ? void 0 : _this$opts$onDragOver.call(_this$opts2, event);
-  }
-  handleDragLeave(event) {
-    var _this$opts$onDragLeav, _this$opts3;
-    event.preventDefault();
-    event.stopPropagation();
-    clearTimeout(this.removeDragOverClassTimeout);
-    // Timeout against flickering, this solution is taken from drag-drop library.
-    // Solution with 'pointer-events: none' didn't work across browsers.
-    this.removeDragOverClassTimeout = setTimeout(() => {
-      this.setPluginState({
-        isDraggingOver: false
-      });
-    }, 50);
-    (_this$opts$onDragLeav = (_this$opts3 = this.opts).onDragLeave) == null ? void 0 : _this$opts$onDragLeav.call(_this$opts3, event);
-  }
   renderHiddenFileInput() {
@@ -171,3 +159,5 @@ const {
       name: this.opts.inputName,
-      multiple: restrictions.maxNumberOfFiles !== 1,
+      multiple: restrictions.maxNumberOfFiles !== 1
+      // @ts-expect-error We actually want to coerce the array to a string (or keep it as null/undefined)
+      ,
       accept: restrictions.allowedFileTypes,
@@ -174,0 +164,0 @@ onChange: this.onInputChange

package.json

 {
   "name": "@uppy/drag-drop",
   "description": "Droppable zone UI for Uppy. Drag and drop files into it to upload.",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "license": "MIT",
@@ -29,8 +29,8 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/utils": "^5.4.3",
+    "@uppy/utils": "^5.7.5",
     "preact": "^10.5.13"
   },
   "peerDependencies": {
-    "@uppy/core": "^3.4.0"
+    "@uppy/core": "^3.10.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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

41375

increased by4.58%

Lines of code

559

increased by3.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@uppy/utils@^5.7.5