@uppy/dashboard - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

lib/components/AddFiles.js

@@ -13,4 +13,4 @@ "use strict";
 class AddFiles extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
@@ -17,0 +17,0 @@ this.triggerFileInputClick = () => {

lib/components/FileCard/index.js

@@ -26,9 +26,12 @@ "use strict";
     this.updateMeta = (newVal, name) => {
-      this.setState(({
-        formState
-      }) => ({
-        formState: { ...formState,
-          [name]: newVal
-        }
-      }));
+      this.setState(_ref => {
+        let {
+          formState
+        } = _ref;
+        return {
+          formState: { ...formState,
+            [name]: newVal
+          }
+        };
+      });
     };
@@ -164,3 +167,10 @@
       className: "uppy-u-reset uppy-c-btn uppy-Dashboard-FileCard-edit",
-      onClick: () => this.props.openFileEditor(file),
+      onClick: event => {
+        // When opening the image editor we want to save any meta fields changes.
+        // Otherwise it's confusing for the user to click save in the editor,
+        // but the changes here are discarded. This bypasses validation,
+        // but we are okay with that.
+        this.handleSave(event);
+        this.props.openFileEditor(file);
+      },
       form: this.form.id
@@ -167,0 +177,0 @@ }, this.props.i18n('editFile'))), h("div", {

lib/components/FileItem/Buttons/index.js

@@ -9,10 +9,12 @@ "use strict";
 
-function EditButton({
-  file,
-  uploadInProgressOrComplete,
-  metaFields,
-  canEditFile,
-  i18n,
-  onClick
-}) {
+function EditButton(_ref) {
+  let {
+    file,
+    uploadInProgressOrComplete,
+    metaFields,
+    canEditFile,
+    i18n,
+    onClick
+  } = _ref;
+
   if (!uploadInProgressOrComplete && metaFields && metaFields.length > 0 || !uploadInProgressOrComplete && canEditFile(file)) {
@@ -56,7 +58,8 @@ return h("button", {
 
-function RemoveButton({
-  i18n,
-  onClick,
-  file
-}) {
+function RemoveButton(_ref2) {
+  let {
+    i18n,
+    onClick,
+    file
+  } = _ref2;
   return h("button", {
@@ -63,0 +66,0 @@ className: "uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--remove",

lib/components/FileItem/FileInfo/index.js

@@ -12,2 +12,4 @@ "use strict";
 
+const MetaErrorMessage = require('../MetaErrorMessage');
+
 const renderFileName = props => {
@@ -72,9 +74,11 @@ const {
 
-const ErrorButton = ({
-  file,
-  onClick
-}) => {
+const ErrorButton = _ref => {
+  let {
+    file,
+    onClick
+  } = _ref;
+
   if (file.error) {
     return h("button", {
-      className: "uppy-Dashboard-Item-errorDetails",
+      className: "uppy-u-reset uppy-Dashboard-Item-errorDetails",
       "aria-label": file.error,
@@ -92,8 +96,11 @@ "data-microtip-position": "bottom",
 module.exports = function FileInfo(props) {
+  const {
+    file
+  } = props;
   return h("div", {
     className: "uppy-Dashboard-Item-fileInfo",
-    "data-uppy-file-source": props.file.source
-  }, renderFileName(props), h("div", {
-    className: "uppy-Dashboard-Item-status"
-  }, renderFileSize(props), renderAuthor(props), ReSelectButton(props), h(ErrorButton, {
+    "data-uppy-file-source": file.source
+  }, h("div", {
+    className: "uppy-Dashboard-Item-fileName"
+  }, renderFileName(props), h(ErrorButton, {
     file: props.file // eslint-disable-next-line no-alert
@@ -103,3 +110,10 @@ ,
 
-  })));
+  })), h("div", {
+    className: "uppy-Dashboard-Item-status"
+  }, renderAuthor(props), renderFileSize(props), ReSelectButton(props)), h(MetaErrorMessage, {
+    file: props.file,
+    i18n: props.i18n,
+    toggleFileCard: props.toggleFileCard,
+    metaFields: props.metaFields
+  }));
 };

lib/components/FileItem/FilePreviewAndLink/index.js

@@ -9,2 +9,4 @@ "use strict";
 
+const MetaErrorMessage = require('../MetaErrorMessage');
+
 const getFileTypeIcon = require('../../../utils/getFileTypeIcon');
@@ -26,5 +28,10 @@
     hidden: true
-  }, "props.file.meta.name")), h(FilePreview, {
+  }, props.file.meta.name)), h(FilePreview, {
     file: props.file
+  }), h(MetaErrorMessage, {
+    file: props.file,
+    i18n: props.i18n,
+    toggleFileCard: props.toggleFileCard,
+    metaFields: props.metaFields
   }));
 };

lib/components/FileItem/FileProgress/index.js

@@ -58,5 +58,6 @@ "use strict";
 
-function ProgressCircleContainer({
-  children
-}) {
+function ProgressCircleContainer(_ref) {
+  let {
+    children
+  } = _ref;
   return h("svg", {
@@ -72,5 +73,6 @@ "aria-hidden": "true",
 
-function ProgressCircle({
-  progress
-}) {
+function ProgressCircle(_ref2) {
+  let {
+    progress
+  } = _ref2;
   // circle length equals 2 * PI * R
@@ -77,0 +79,0 @@ const circleLength = 2 * Math.PI * 15;

lib/components/FileItem/index.js

@@ -95,3 +95,6 @@ "use strict";
       file: file,
-      showLinkToFileUploadResult: this.props.showLinkToFileUploadResult
+      showLinkToFileUploadResult: this.props.showLinkToFileUploadResult,
+      i18n: this.props.i18n,
+      toggleFileCard: this.props.toggleFileCard,
+      metaFields: this.props.metaFields
     }), h(FileProgress, {
@@ -118,3 +121,5 @@ uppy: this.props.uppy,
       i18n: this.props.i18n,
-      toggleAddFilesPanel: this.props.toggleAddFilesPanel
+      toggleAddFilesPanel: this.props.toggleAddFilesPanel,
+      toggleFileCard: this.props.toggleFileCard,
+      metaFields: this.props.metaFields
     }), h(Buttons, {
@@ -121,0 +126,0 @@ file: file,

lib/components/PickerPanelTopBar.js

@@ -17,3 +17,7 @@ "use strict";
 
-function getUploadingState(isAllErrored, isAllComplete, isAllPaused, files = {}) {
+function getUploadingState(isAllErrored, isAllComplete, isAllPaused, files) {
+  if (files === void 0) {
+    files = {};
+  }
+
   if (isAllErrored) {
@@ -20,0 +24,0 @@ return uploadStates.STATE_ERROR;

lib/components/VirtualList.js

@@ -120,9 +120,10 @@ "use strict";
 
-  render({
-    data,
-    rowHeight,
-    renderRow,
-    overscanCount = 10,
-    ...props
-  }) {
+  render(_ref) {
+    let {
+      data,
+      rowHeight,
+      renderRow,
+      overscanCount = 10,
+      ...props
+    } = _ref;
     const {
@@ -129,0 +130,0 @@ offset,

lib/index.js

@@ -47,2 +47,4 @@ "use strict";
 
+const locale = require('./locale');
+
 const TAB_KEY = 9;
@@ -78,3 +80,6 @@ const ESC_KEY = 27;
   constructor(uppy, _opts) {
+    var _this;
+
     super(uppy, _opts);
+    _this = this;
 
@@ -227,3 +232,7 @@ this.removeTarget = plugin => {
 
-    this.closeModal = (opts = {}) => {
+    this.closeModal = function (opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
+
       const {
@@ -233,6 +242,7 @@ // Whether the modal is being closed by the user (`true`) or by other means (e.g. browser back button)
       } = opts;
+
       const {
         isHidden,
         isClosing
-      } = this.getPluginState();
+      } = _this.getPluginState();
 
@@ -249,8 +259,8 @@ if (isHidden || isClosing) {
 
-      if (this.opts.disablePageScrollWhenModalOpen) {
+      if (_this.opts.disablePageScrollWhenModalOpen) {
         document.body.classList.remove('uppy-Dashboard-isFixed');
       }
 
-      if (this.opts.animateOpenClose) {
-        this.setPluginState({
+      if (_this.opts.animateOpenClose) {
+        _this.setPluginState({
           isClosing: true
@@ -260,19 +270,26 @@ });
         const handler = () => {
-          this.setPluginState({
+          _this.setPluginState({
             isHidden: true,
             isClosing: false
           });
-          this.superFocus.cancel();
-          this.savedActiveElement.focus();
-          this.el.removeEventListener('animationend', handler, false);
+
+          _this.superFocus.cancel();
+
+          _this.savedActiveElement.focus();
+
+          _this.el.removeEventListener('animationend', handler, false);
+
           resolve();
         };
 
-        this.el.addEventListener('animationend', handler, false);
+        _this.el.addEventListener('animationend', handler, false);
       } else {
-        this.setPluginState({
+        _this.setPluginState({
           isHidden: true
         });
-        this.superFocus.cancel();
-        this.savedActiveElement.focus();
+
+        _this.superFocus.cancel();
+
+        _this.savedActiveElement.focus();
+
         resolve();
@@ -282,6 +299,6 @@ } // handle ESC and TAB keys in modal dialog
 
-      document.removeEventListener('keydown', this.handleKeyDownInModal);
+      document.removeEventListener('keydown', _this.handleKeyDownInModal);
 
       if (manualClose) {
-        if (this.opts.browserBackButtonClose) {
+        if (_this.opts.browserBackButtonClose) {
           var _history$state;
@@ -291,3 +308,3 @@
           // eslint-disable-next-line no-restricted-globals
-          if ((_history$state = history.state) != null && _history$state[this.modalName]) {
+          if ((_history$state = history.state) != null && _history$state[_this.modalName]) {
             // Go back in history to clear out the entry we created (ultimately closing the modal)
@@ -300,3 +317,4 @@ // eslint-disable-next-line no-restricted-globals
 
-      this.uppy.emit('dashboard:modal-closed');
+      _this.uppy.emit('dashboard:modal-closed');
+
       return promise;
@@ -506,3 +524,3 @@ };
     this.handlePaste = event => {
-      // 1. Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
+      // Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
       this.uppy.iteratePlugins(plugin => {
@@ -513,6 +531,10 @@ if (plugin.type === 'acquirer') {
         }
-      }); // 2. Add all dropped files
+      }); // Add all dropped files
 
       const files = toArray(event.clipboardData.files);
-      this.addFiles(files);
+
+      if (files.length > 0) {
+        this.uppy.log('[Dashboard] Files pasted');
+        this.addFiles(files);
+      }
     };
@@ -523,12 +545,46 @@
       const files = toArray(event.target.files);
-      this.addFiles(files);
+
+      if (files.length > 0) {
+        this.uppy.log('[Dashboard] Files selected through input');
+        this.addFiles(files);
+      }
     };
 
     this.handleDragOver = event => {
+      var _this$opts$onDragOver, _this$opts;
+
       event.preventDefault();
-      event.stopPropagation();
+      event.stopPropagation(); // Check if some plugin can handle the datatransfer without files —
+      // for instance, the Url plugin can import a url
 
-      if (this.opts.disabled || this.opts.disableLocalFiles || !this.uppy.getState().allowNewUpload) {
+      const canSomePluginHandleRootDrop = () => {
+        let somePluginCanHandleRootDrop = true;
+        this.uppy.iteratePlugins(plugin => {
+          if (plugin.canHandleRootDrop != null && plugin.canHandleRootDrop(event)) {
+            somePluginCanHandleRootDrop = true;
+          }
+        });
+        return somePluginCanHandleRootDrop;
+      }; // Check if the "type" of the datatransfer object includes files
+
+
+      const doesEventHaveFiles = () => {
+        const {
+          types
+        } = event.dataTransfer;
+        return types.some(type => type === 'Files');
+      }; // Deny drop, if no plugins can handle datatransfer, there are no files,
+      // or when opts.disabled is set, or new uploads are not allowed
+
+
+      const somePluginCanHandleRootDrop = canSomePluginHandleRootDrop(event);
+      const hasFiles = doesEventHaveFiles(event);
+
+      if (!somePluginCanHandleRootDrop && !hasFiles || this.opts.disabled // opts.disableLocalFiles should only be taken into account if no plugins
+      // can handle the datatransfer
+      || this.opts.disableLocalFiles && (hasFiles || !somePluginCanHandleRootDrop) || !this.uppy.getState().allowNewUpload) {
+        event.dataTransfer.dropEffect = 'none';
+        clearTimeout(this.removeDragOverClassTimeout);
         return;
-      } // 1. Add a small (+) icon on drop
+      } // Add a small (+) icon on drop
       // (and prevent browsers from interpreting this as files being _moved_ into the
@@ -543,12 +599,10 @@ // browser, https://github.com/transloadit/uppy/issues/1978).
       });
+      (_this$opts$onDragOver = (_this$opts = this.opts).onDragOver) == null ? void 0 : _this$opts$onDragOver.call(_this$opts, event);
     };
 
     this.handleDragLeave = event => {
+      var _this$opts$onDragLeav, _this$opts2;
+
       event.preventDefault();
       event.stopPropagation();
-
-      if (this.opts.disabled || this.opts.disableLocalFiles || !this.uppy.getState().allowNewUpload) {
-        return;
-      }
-
       clearTimeout(this.removeDragOverClassTimeout); // Timeout against flickering, this solution is taken from drag-drop library.
@@ -562,17 +616,14 @@ // Solution with 'pointer-events: none' didn't work across browsers.
       }, 50);
+      (_this$opts$onDragLeav = (_this$opts2 = this.opts).onDragLeave) == null ? void 0 : _this$opts$onDragLeav.call(_this$opts2, event);
     };
 
-    this.handleDrop = event => {
+    this.handleDrop = async event => {
+      var _this$opts$onDrop, _this$opts3;
+
       event.preventDefault();
       event.stopPropagation();
-
-      if (this.opts.disabled || this.opts.disableLocalFiles || !this.uppy.getState().allowNewUpload) {
-        return;
-      }
-
-      clearTimeout(this.removeDragOverClassTimeout); // 2. Remove dragover class
-
+      clearTimeout(this.removeDragOverClassTimeout);
       this.setPluginState({
         isDraggingOver: false
-      }); // 3. Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+      }); // Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
 
@@ -584,3 +635,3 @@ this.uppy.iteratePlugins(plugin => {
         }
-      }); // 4. Add all dropped files
+      }); // Add all dropped files
 
@@ -590,3 +641,4 @@ let executedDropErrorOnce = false;
       const logDropError = error => {
-        this.uppy.log(error, 'error'); // In practice all drop errors are most likely the same, so let's just show one to avoid overwhelming the user
+        this.uppy.log(error, 'error'); // In practice all drop errors are most likely the same,
+        // so let's just show one to avoid overwhelming the user
 
@@ -597,12 +649,15 @@ if (!executedDropErrorOnce) {
         }
-      };
+      }; // Add all dropped files
 
-      getDroppedFiles(event.dataTransfer, {
+
+      const files = await getDroppedFiles(event.dataTransfer, {
         logDropError
-      }).then(files => {
-        if (files.length > 0) {
-          this.uppy.log('[Dashboard] Files were dropped');
-          this.addFiles(files);
-        }
       });
+
+      if (files.length > 0) {
+        this.uppy.log('[Dashboard] Files dropped');
+        this.addFiles(files);
+      }
+
+      (_this$opts$onDrop = (_this$opts3 = this.opts).onDrop) == null ? void 0 : _this$opts$onDrop.call(_this$opts3, event);
     };
@@ -635,5 +690,7 @@
 
-    this.handleComplete = ({
-      failed
-    }) => {
+    this.handleComplete = _ref => {
+      let {
+        failed
+      } = _ref;
+
       if (this.opts.closeAfterFinish && failed.length === 0) {
@@ -1073,62 +1130,3 @@ // All uploads are done
     this.modalName = `uppy-Dashboard-${nanoid()}`;
-    this.defaultLocale = {
-      strings: {
-        closeModal: 'Close Modal',
-        importFrom: 'Import from %{name}',
-        addingMoreFiles: 'Adding more files',
-        addMoreFiles: 'Add more files',
-        dashboardWindowTitle: 'File Uploader Window (Press escape to close)',
-        dashboardTitle: 'File Uploader',
-        copyLinkToClipboardSuccess: 'Link copied to clipboard',
-        copyLinkToClipboardFallback: 'Copy the URL below',
-        copyLink: 'Copy link',
-        back: 'Back',
-        addMore: 'Add more',
-        removeFile: 'Remove file %{file}',
-        editFile: 'Edit file',
-        editFileWithFilename: 'Edit file %{file}',
-        editing: 'Editing %{file}',
-        finishEditingFile: 'Finish editing file',
-        save: 'Save',
-        saveChanges: 'Save changes',
-        cancel: 'Cancel',
-        myDevice: 'My Device',
-        dropPasteFiles: 'Drop files here or %{browseFiles}',
-        dropPasteFolders: 'Drop files here or %{browseFolders}',
-        dropPasteBoth: 'Drop files here, %{browseFiles} or %{browseFolders}',
-        dropPasteImportFiles: 'Drop files here, %{browseFiles} or import from:',
-        dropPasteImportFolders: 'Drop files here, %{browseFolders} or import from:',
-        dropPasteImportBoth: 'Drop files here, %{browseFiles}, %{browseFolders} or import from:',
-        importFiles: 'Import files from:',
-        dropHint: 'Drop your files here',
-        browseFiles: 'browse files',
-        browseFolders: 'browse folders',
-        uploadComplete: 'Upload complete',
-        uploadPaused: 'Upload paused',
-        resumeUpload: 'Resume upload',
-        pauseUpload: 'Pause upload',
-        retryUpload: 'Retry upload',
-        cancelUpload: 'Cancel upload',
-        xFilesSelected: {
-          0: '%{smart_count} file selected',
-          1: '%{smart_count} files selected'
-        },
-        uploadingXFiles: {
-          0: 'Uploading %{smart_count} file',
-          1: 'Uploading %{smart_count} files'
-        },
-        processingXFiles: {
-          0: 'Processing %{smart_count} file',
-          1: 'Processing %{smart_count} files'
-        },
-        recoveredXFiles: {
-          0: 'We could not fully recover 1 file. Please re-select it and resume the upload.',
-          1: 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.'
-        },
-        recoveredAllFiles: 'We restored all files. You can now resume the upload.',
-        sessionRestored: 'Session restored',
-        reSelect: 'Re-select',
-        poweredBy: 'Powered by %{uppy}'
-      }
-    }; // set default options
+    this.defaultLocale = locale; // set default options
 
@@ -1198,2 +1196,2 @@ const defaultOptions = {
 
-}), _class.VERSION = "2.1.1", _temp);
+}), _class.VERSION = "2.1.2", _temp);

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
@@ -26,7 +26,7 @@ "main": "lib/index.js",
     "@transloadit/prettier-bytes": "0.0.7",
-    "@uppy/informer": "^2.0.4",
-    "@uppy/provider-views": "^2.0.4",
-    "@uppy/status-bar": "^2.1.1",
-    "@uppy/thumbnail-generator": "^2.0.5",
-    "@uppy/utils": "^4.0.3",
+    "@uppy/informer": "^2.0.5",
+    "@uppy/provider-views": "^2.0.6",
+    "@uppy/status-bar": "^2.1.2",
+    "@uppy/thumbnail-generator": "^2.0.6",
+    "@uppy/utils": "^4.0.4",
     "classnames": "^2.2.6",
@@ -40,10 +40,9 @@ "is-shallow-equal": "^1.0.1",
   "devDependencies": {
-    "@uppy/google-drive": "^2.0.4",
-    "@uppy/status-bar": "*",
+    "@uppy/google-drive": "^2.0.5",
+    "@uppy/status-bar": "^2.1.2",
     "resize-observer-polyfill": "^1.5.0"
   },
   "peerDependencies": {
-    "@uppy/core": "^2.0.0"
-  },
-  "gitHead": "b8b4127bd55b8e7395889048407c074fce944295"
-}
+    "@uppy/core": "^2.1.3"
+  }
+}

src/components/FileCard/index.js

@@ -9,3 +9,3 @@ const { h, Component } = require('preact')
 class FileCard extends Component {
-  form = document.createElement('form');
+  form = document.createElement('form')
 
@@ -156,3 +156,10 @@ constructor (props) {
                 className="uppy-u-reset uppy-c-btn uppy-Dashboard-FileCard-edit"
-                onClick={() => this.props.openFileEditor(file)}
+                onClick={(event) => {
+                  // When opening the image editor we want to save any meta fields changes.
+                  // Otherwise it's confusing for the user to click save in the editor,
+                  // but the changes here are discarded. This bypasses validation,
+                  // but we are okay with that.
+                  this.handleSave(event)
+                  this.props.openFileEditor(file)
+                }}
                 form={this.form.id}
@@ -159,0 +166,0 @@ >

src/components/FileItem/FileInfo/index.js

 const { h, Fragment } = require('preact')
 const prettierBytes = require('@transloadit/prettier-bytes')
 const truncateString = require('@uppy/utils/lib/truncateString')
+const MetaErrorMessage = require('../MetaErrorMessage')
 
@@ -57,18 +58,18 @@ const renderFileName = (props) => {
 const renderFileSize = (props) => props.file.size && (
-<div className="uppy-Dashboard-Item-statusSize">
-  {prettierBytes(props.file.size)}
-</div>
+  <div className="uppy-Dashboard-Item-statusSize">
+    {prettierBytes(props.file.size)}
+  </div>
 )
 
 const ReSelectButton = (props) => props.file.isGhost && (
-<span>
-  {' \u2022 '}
-  <button
-    className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-reSelect"
-    type="button"
-    onClick={props.toggleAddFilesPanel}
-  >
-    {props.i18n('reSelect')}
-  </button>
-</span>
+  <span>
+    {' \u2022 '}
+    <button
+      className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-reSelect"
+      type="button"
+      onClick={props.toggleAddFilesPanel}
+    >
+      {props.i18n('reSelect')}
+    </button>
+  </span>
 )
@@ -80,3 +81,3 @@
       <button
-        className="uppy-Dashboard-Item-errorDetails"
+        className="uppy-u-reset uppy-Dashboard-Item-errorDetails"
         aria-label={file.error}
@@ -96,12 +97,10 @@ data-microtip-position="bottom"
 module.exports = function FileInfo (props) {
+  const { file } = props
   return (
     <div
       className="uppy-Dashboard-Item-fileInfo"
-      data-uppy-file-source={props.file.source}
+      data-uppy-file-source={file.source}
     >
-      {renderFileName(props)}
-      <div className="uppy-Dashboard-Item-status">
-        {renderFileSize(props)}
-        {renderAuthor(props)}
-        {ReSelectButton(props)}
+      <div className="uppy-Dashboard-Item-fileName">
+        {renderFileName(props)}
         <ErrorButton
@@ -113,4 +112,15 @@ file={props.file}
       </div>
+      <div className="uppy-Dashboard-Item-status">
+        {renderAuthor(props)}
+        {renderFileSize(props)}
+        {ReSelectButton(props)}
+      </div>
+      <MetaErrorMessage
+        file={props.file}
+        i18n={props.i18n}
+        toggleFileCard={props.toggleFileCard}
+        metaFields={props.metaFields}
+      />
     </div>
   )
 }

src/components/FileItem/FilePreviewAndLink/index.js

 const { h } = require('preact')
 const FilePreview = require('../../FilePreview')
+const MetaErrorMessage = require('../MetaErrorMessage')
 const getFileTypeIcon = require('../../../utils/getFileTypeIcon')
@@ -22,3 +23,3 @@
           >
-            <span hidden>props.file.meta.name</span>
+            <span hidden>{props.file.meta.name}</span>
           </a>
@@ -28,4 +29,10 @@ )
       <FilePreview file={props.file} />
+      <MetaErrorMessage
+        file={props.file}
+        i18n={props.i18n}
+        toggleFileCard={props.toggleFileCard}
+        metaFields={props.metaFields}
+      />
     </div>
   )
 }

src/components/FileItem/index.js

@@ -79,2 +79,5 @@ const { h, Component } = require('preact')
             showLinkToFileUploadResult={this.props.showLinkToFileUploadResult}
+            i18n={this.props.i18n}
+            toggleFileCard={this.props.toggleFileCard}
+            metaFields={this.props.metaFields}
           />
@@ -105,2 +108,4 @@ <FileProgress
             toggleAddFilesPanel={this.props.toggleAddFilesPanel}
+            toggleFileCard={this.props.toggleFileCard}
+            metaFields={this.props.metaFields}
           />
@@ -107,0 +112,0 @@ <Buttons

src/components/FileList.js

@@ -25,3 +25,3 @@ const classNames = require('classnames')
     'uppy-Dashboard-files',
-    { 'uppy-Dashboard-files--noFiles': noFiles }
+    { 'uppy-Dashboard-files--noFiles': noFiles },
   )
@@ -28,0 +28,0 @@

src/components/PickerPanelTopBar.js

@@ -53,3 +53,3 @@ const { h } = require('preact')
     props.isAllPaused,
-    props.files
+    props.files,
   )
@@ -56,0 +56,0 @@

src/index.js

@@ -17,2 +17,4 @@ const { h } = require('preact')
 
+const locale = require('./locale')
+
 const TAB_KEY = 9
@@ -51,62 +53,3 @@ const ESC_KEY = 27
 
-    this.defaultLocale = {
-      strings: {
-        closeModal: 'Close Modal',
-        importFrom: 'Import from %{name}',
-        addingMoreFiles: 'Adding more files',
-        addMoreFiles: 'Add more files',
-        dashboardWindowTitle: 'File Uploader Window (Press escape to close)',
-        dashboardTitle: 'File Uploader',
-        copyLinkToClipboardSuccess: 'Link copied to clipboard',
-        copyLinkToClipboardFallback: 'Copy the URL below',
-        copyLink: 'Copy link',
-        back: 'Back',
-        addMore: 'Add more',
-        removeFile: 'Remove file %{file}',
-        editFile: 'Edit file',
-        editFileWithFilename: 'Edit file %{file}',
-        editing: 'Editing %{file}',
-        finishEditingFile: 'Finish editing file',
-        save: 'Save',
-        saveChanges: 'Save changes',
-        cancel: 'Cancel',
-        myDevice: 'My Device',
-        dropPasteFiles: 'Drop files here or %{browseFiles}',
-        dropPasteFolders: 'Drop files here or %{browseFolders}',
-        dropPasteBoth: 'Drop files here, %{browseFiles} or %{browseFolders}',
-        dropPasteImportFiles: 'Drop files here, %{browseFiles} or import from:',
-        dropPasteImportFolders: 'Drop files here, %{browseFolders} or import from:',
-        dropPasteImportBoth: 'Drop files here, %{browseFiles}, %{browseFolders} or import from:',
-        importFiles: 'Import files from:',
-        dropHint: 'Drop your files here',
-        browseFiles: 'browse files',
-        browseFolders: 'browse folders',
-        uploadComplete: 'Upload complete',
-        uploadPaused: 'Upload paused',
-        resumeUpload: 'Resume upload',
-        pauseUpload: 'Pause upload',
-        retryUpload: 'Retry upload',
-        cancelUpload: 'Cancel upload',
-        xFilesSelected: {
-          0: '%{smart_count} file selected',
-          1: '%{smart_count} files selected',
-        },
-        uploadingXFiles: {
-          0: 'Uploading %{smart_count} file',
-          1: 'Uploading %{smart_count} files',
-        },
-        processingXFiles: {
-          0: 'Processing %{smart_count} file',
-          1: 'Processing %{smart_count} files',
-        },
-        recoveredXFiles: {
-          0: 'We could not fully recover 1 file. Please re-select it and resume the upload.',
-          1: 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.',
-        },
-        recoveredAllFiles: 'We restored all files. You can now resume the upload.',
-        sessionRestored: 'Session restored',
-        reSelect: 'Re-select',
-        poweredBy: 'Powered by %{uppy}',
-      },
-    }
+    this.defaultLocale = locale
 
@@ -585,3 +528,3 @@ // set default options
   handlePaste = (event) => {
-    // 1. Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
+    // Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
     this.uppy.iteratePlugins((plugin) => {
@@ -594,5 +537,8 @@ if (plugin.type === 'acquirer') {
 
-    // 2. Add all dropped files
+    // Add all dropped files
     const files = toArray(event.clipboardData.files)
-    this.addFiles(files)
+    if (files.length > 0) {
+      this.uppy.log('[Dashboard] Files pasted')
+      this.addFiles(files)
+    }
   }
@@ -603,3 +549,6 @@
     const files = toArray(event.target.files)
-    this.addFiles(files)
+    if (files.length > 0) {
+      this.uppy.log('[Dashboard] Files selected through input')
+      this.addFiles(files)
+    }
   }
@@ -611,9 +560,38 @@
 
-    if (this.opts.disabled
-      || this.opts.disableLocalFiles
-      || !this.uppy.getState().allowNewUpload) {
+    // Check if some plugin can handle the datatransfer without files —
+    // for instance, the Url plugin can import a url
+    const canSomePluginHandleRootDrop = () => {
+      let somePluginCanHandleRootDrop = true
+      this.uppy.iteratePlugins((plugin) => {
+        if (plugin.canHandleRootDrop?.(event)) {
+          somePluginCanHandleRootDrop = true
+        }
+      })
+      return somePluginCanHandleRootDrop
+    }
+
+    // Check if the "type" of the datatransfer object includes files
+    const doesEventHaveFiles = () => {
+      const { types } = event.dataTransfer
+      return types.some(type => type === 'Files')
+    }
+
+    // Deny drop, if no plugins can handle datatransfer, there are no files,
+    // or when opts.disabled is set, or new uploads are not allowed
+    const somePluginCanHandleRootDrop = canSomePluginHandleRootDrop(event)
+    const hasFiles = doesEventHaveFiles(event)
+    if (
+      (!somePluginCanHandleRootDrop && !hasFiles)
+      || this.opts.disabled
+      // opts.disableLocalFiles should only be taken into account if no plugins
+      // can handle the datatransfer
+      || (this.opts.disableLocalFiles && (hasFiles || !somePluginCanHandleRootDrop))
+      || !this.uppy.getState().allowNewUpload
+    ) {
+      event.dataTransfer.dropEffect = 'none'
+      clearTimeout(this.removeDragOverClassTimeout)
       return
     }
 
-    // 1. Add a small (+) icon on drop
+    // Add a small (+) icon on drop
     // (and prevent browsers from interpreting this as files being _moved_ into the
@@ -625,2 +603,4 @@ // browser, https://github.com/transloadit/uppy/issues/1978).
     this.setPluginState({ isDraggingOver: true })
+
+    this.opts.onDragOver?.(event)
   }
@@ -632,8 +612,2 @@
 
-    if (this.opts.disabled
-      || this.opts.disableLocalFiles
-      || !this.uppy.getState().allowNewUpload) {
-      return
-    }
-
     clearTimeout(this.removeDragOverClassTimeout)
@@ -645,20 +619,15 @@ // Timeout against flickering, this solution is taken from drag-drop library.
     }, 50)
+
+    this.opts.onDragLeave?.(event)
   }
 
-  handleDrop = (event) => {
+  handleDrop = async (event) => {
     event.preventDefault()
     event.stopPropagation()
 
-    if (this.opts.disabled
-        || this.opts.disableLocalFiles
-        || !this.uppy.getState().allowNewUpload) {
-      return
-    }
-
     clearTimeout(this.removeDragOverClassTimeout)
 
-    // 2. Remove dragover class
     this.setPluginState({ isDraggingOver: false })
 
-    // 3. Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+    // Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
     this.uppy.iteratePlugins((plugin) => {
@@ -671,3 +640,3 @@ if (plugin.type === 'acquirer') {
 
-    // 4. Add all dropped files
+    // Add all dropped files
     let executedDropErrorOnce = false
@@ -677,3 +646,4 @@ const logDropError = (error) => {
 
-      // In practice all drop errors are most likely the same, so let's just show one to avoid overwhelming the user
+      // In practice all drop errors are most likely the same,
+      // so let's just show one to avoid overwhelming the user
       if (!executedDropErrorOnce) {
@@ -685,9 +655,10 @@ this.uppy.info(error.message, 'error')
 
-    getDroppedFiles(event.dataTransfer, { logDropError })
-      .then((files) => {
-        if (files.length > 0) {
-          this.uppy.log('[Dashboard] Files were dropped')
-          this.addFiles(files)
-        }
-      })
+    // Add all dropped files
+    const files = await getDroppedFiles(event.dataTransfer, { logDropError })
+    if (files.length > 0) {
+      this.uppy.log('[Dashboard] Files dropped')
+      this.addFiles(files)
+    }
+
+    this.opts.onDrop?.(event)
   }
@@ -694,0 +665,0 @@

src/index.test.js

@@ -78,3 +78,3 @@ const Core = require('@uppy/core')
     expect(
-      core.getPlugin('Dashboard').opts.width
+      core.getPlugin('Dashboard').opts.width,
     ).toEqual(300)
@@ -99,3 +99,3 @@ })
     expect(
-      core.getPlugin('Dashboard').i18n('myDevice')
+      core.getPlugin('Dashboard').i18n('myDevice'),
     ).toEqual('Май дивайс')
@@ -102,0 +102,0 @@ })

types/generatedLocale.d.ts

 /* eslint-disable */
-  import type { Locale } from '@uppy/core'
+import type { Locale } from '@uppy/core'
 
-  type DashboardLocale = Locale<
-      | 'closeModal'
+type DashboardLocale = Locale<
+    | 'closeModal'
+| 'addMoreFiles'
+| 'addingMoreFiles'
 | 'importFrom'
-| 'addingMoreFiles'
-| 'addMoreFiles'
 | 'dashboardWindowTitle'
@@ -15,22 +15,9 @@ | 'dashboardTitle'
 | 'back'
-| 'addMore'
 | 'removeFile'
 | 'editFile'
-| 'editFileWithFilename'
 | 'editing'
 | 'finishEditingFile'
-| 'save'
 | 'saveChanges'
-| 'cancel'
 | 'myDevice'
-| 'dropPasteFiles'
-| 'dropPasteFolders'
-| 'dropPasteBoth'
-| 'dropPasteImportFiles'
-| 'dropPasteImportFolders'
-| 'dropPasteImportBoth'
-| 'importFiles'
 | 'dropHint'
-| 'browseFiles'
-| 'browseFolders'
 | 'uploadComplete'
@@ -45,2 +32,16 @@ | 'uploadPaused'
 | 'processingXFiles'
+| 'poweredBy'
+| 'addMore'
+| 'editFileWithFilename'
+| 'save'
+| 'cancel'
+| 'dropPasteFiles'
+| 'dropPasteFolders'
+| 'dropPasteBoth'
+| 'dropPasteImportFiles'
+| 'dropPasteImportFolders'
+| 'dropPasteImportBoth'
+| 'importFiles'
+| 'browseFiles'
+| 'browseFolders'
 | 'recoveredXFiles'
@@ -50,5 +51,5 @@ | 'recoveredAllFiles'
 | 'reSelect'
-| 'poweredBy'
-  >
+| 'missingRequiredMetaFields'
+>
 
-  export default DashboardLocale
+export default DashboardLocale

types/index.d.ts

@@ -31,3 +31,2 @@ import type { PluginOptions, UIPlugin, PluginTarget, UppyFile, GenericEventCallback } from '@uppy/core'
   disableThumbnailGenerator?: boolean
-  doneButtonHandler?: () => void
   height?: string | number
@@ -43,3 +42,2 @@ hideCancelButton?: boolean
   note?: string | null
-  onRequestCloseModal?: () => void
   plugins?: string[]
@@ -59,3 +57,8 @@ fileManagerSelectionType?: 'files' | 'folders' | 'both';
   disabled?: boolean
-    disableLocalFiles?: boolean
+  disableLocalFiles?: boolean
+  onRequestCloseModal?: () => void
+  doneButtonHandler?: () => void
+  onDragOver?: (event: DragEvent) => void
+  onDragLeave?: (event: DragEvent) => void
+  onDrop?: (event: DragEvent) => void
 }
@@ -62,0 +65,0 @@

types/index.test-d.ts

@@ -50,2 +50,5 @@ import { expectType, expectError } from 'tsd'
     ],
+    onDragOver: (event) => event.clientX,
+    onDrop: (event) => event.clientX,
+    onDragLeave: (event) => event.clientX,
   })
@@ -52,0 +55,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

647050

increased by3.99%

Number of package files

94

increased by8.05%

Lines of code

9521

increased by3.4%

Dependency changes

• Updated@uppy/informer@^2.0.5

• Updated@uppy/provider-views@^2.0.6

• Updated@uppy/status-bar@^2.1.2

• Updated@uppy/thumbnail-generator@^2.0.6

• Updated@uppy/utils@^4.0.4