@uppy/dashboard - npm Package Compare versions

Comparing version 0.30.4 to 0.30.5

lib/components/AddFiles.js

@@ -23,3 +23,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
       'svg',
-      { 'aria-hidden': 'true', 'class': 'UppyIcon uppy-Dashboard-poweredByIcon', width: '11', height: '11', viewBox: '0 0 11 11', xmlns: 'http://www.w3.org/2000/svg' },
+      { 'aria-hidden': 'true', 'class': 'UppyIcon uppy-Dashboard-poweredByIcon', width: '11', height: '11', viewBox: '0 0 11 11' },
       h('path', { d: 'M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z', 'fill-rule': 'evenodd' })
@@ -26,0 +26,0 @@ ),

lib/components/Dashboard.js

@@ -34,3 +34,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-  var dashboardClassName = classNames({ 'uppy-Root': props.isTargetDOMEl }, 'uppy-Dashboard', { 'Uppy--isTouchDevice': isTouchDevice() }, { 'uppy-Dashboard--animateOpenClose': props.animateOpenClose }, { 'uppy-Dashboard--isClosing': props.isClosing }, { 'uppy-Dashboard--modal': !props.inline }, { 'uppy-size--md': props.containerWidth > 576 }, { 'uppy-size--lg': props.containerWidth > 700 }, { 'uppy-size--xl': props.containerWidth > 900 }, { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel }, { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible });
+  var dashboardClassName = classNames({ 'uppy-Root': props.isTargetDOMEl }, 'uppy-Dashboard', { 'Uppy--isTouchDevice': isTouchDevice() }, { 'uppy-Dashboard--animateOpenClose': props.animateOpenClose }, { 'uppy-Dashboard--isClosing': props.isClosing }, { 'uppy-Dashboard--isDraggingOver': props.isDraggingOver }, { 'uppy-Dashboard--modal': !props.inline }, { 'uppy-size--md': props.containerWidth > 576 }, { 'uppy-size--lg': props.containerWidth > 700 }, { 'uppy-size--xl': props.containerWidth > 900 }, { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel }, { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible });
 
@@ -42,3 +42,8 @@ return h(
       'aria-label': !props.inline ? props.i18n('dashboardWindowTitle') : props.i18n('dashboardTitle'),
-      onpaste: props.handlePaste },
+      onpaste: props.handlePaste,
+
+      onDragOver: props.handleDragOver,
+      onDragLeave: props.handleDragLeave,
+      onDrop: props.handleDrop
+    },
     h('div', { 'class': 'uppy-Dashboard-overlay', tabindex: -1, onclick: props.handleClickOutside }),
@@ -70,2 +75,7 @@ h(
         { 'class': 'uppy-Dashboard-innerWrap' },
+        h(
+          'div',
+          { 'class': 'uppy-Dashboard-dropFilesHereHint' },
+          props.i18n('dropHint')
+        ),
         !noFiles && props.showSelectedFiles && h(PanelTopBar, props),
@@ -72,0 +82,0 @@ props.showSelectedFiles ? noFiles ? h(AddFiles, props) : h(FileList, props) : h(AddFiles, props),

lib/components/FileItem.js

@@ -24,3 +24,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-  if (props.isUploaded || props.bundled || props.hidePauseResumeCancelButtons && !props.error) {
+  if (props.isUploaded || props.hidePauseResumeCancelButtons && !props.error) {
     return h(
@@ -33,3 +33,3 @@ 'div',
         hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons,
-        bundled: props.bundled
+        individualCancellation: props.individualCancellation
       })
@@ -50,2 +50,3 @@ );
       fileID: props.file.id,
+      individualCancellation: props.individualCancellation,
       hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons
@@ -56,3 +57,3 @@ })
 
-module.exports = function fileItem(props) {
+module.exports = function FileItem(props) {
   var file = props.file;
@@ -85,3 +86,3 @@ var acquirers = props.acquirers;
       props.pauseUpload(file.id);
-    } else {
+    } else if (props.individualCancellation) {
       props.cancelUpload(file.id);
@@ -105,9 +106,13 @@ }
       return props.i18n('pauseUpload');
-    } else {
+    } else if (props.individualCancellation) {
       return props.i18n('cancelUpload');
     }
+
+    return '';
   }
 
-  var dashboardItemClass = classNames('uppy-DashboardItem', { 'is-inprogress': uploadInProgress }, { 'is-processing': isProcessing }, { 'is-complete': isUploaded }, { 'is-paused': isPaused }, { 'is-error': error }, { 'is-resumable': props.resumableUploads }, { 'is-bundled': props.bundledUpload });
+  var dashboardItemClass = classNames('uppy-DashboardItem', { 'is-inprogress': uploadInProgress }, { 'is-processing': isProcessing }, { 'is-complete': isUploaded }, { 'is-paused': isPaused }, { 'is-error': error }, { 'is-resumable': props.resumableUploads }, { 'is-noIndividualCancellation': !props.individualCancellation });
 
+  var showRemoveButton = props.individualCancellation ? !isUploaded : !uploadInProgress && !isUploaded;
+
   return h(
@@ -199,3 +204,3 @@ 'li',
       { 'class': 'uppy-DashboardItem-action' },
-      !isUploaded && h(
+      showRemoveButton && h(
         'button',
@@ -211,5 +216,5 @@ { 'class': 'uppy-DashboardItem-remove',
           'svg',
-          { 'aria-hidden': 'true', 'class': 'UppyIcon', width: '60', height: '60', viewBox: '0 0 60 60', xmlns: 'http://www.w3.org/2000/svg' },
-          h('path', { stroke: '#FFF', 'stroke-width': '1', 'fill-rule': 'nonzero', 'vector-effect': 'non-scaling-stroke', d: 'M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z' }),
-          h('path', { fill: '#FFF', 'vector-effect': 'non-scaling-stroke', d: 'M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z' })
+          { 'aria-hidden': 'true', 'class': 'UppyIcon', width: '18', height: '18', viewBox: '0 0 18 18' },
+          h('path', { d: 'M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z' }),
+          h('path', { fill: '#FFF', d: 'M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z' })
         )
@@ -216,0 +221,0 @@ )

lib/components/FileItemProgress.js

@@ -28,3 +28,3 @@ var _require = require('preact'),
     ),
-    !props.hidePauseResumeCancelButtons && !props.bundled ? h(
+    !props.hidePauseResumeCancelButtons ? h(
       "g",
@@ -31,0 +31,0 @@ null,

lib/components/FilePreview.js

@@ -27,11 +27,6 @@ var getFileTypeIcon = require('../utils/getFileTypeIcon');
       'svg',
-      { 'class': 'uppy-DashboardItem-previewIconBg', width: '72', height: '93', viewBox: '0 0 72 93' },
-      h(
-        'g',
-        null,
-        h('path', { d: 'M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z', fill: '#FFF' }),
-        h('path', { d: 'M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z', fill: '#E4E4E4' })
-      )
+      { 'class': 'uppy-DashboardItem-previewIconBg', width: '58', height: '76', viewBox: '0 0 58 76' },
+      h('rect', { fill: '#FFF', width: '58', height: '76', rx: '3', 'fill-rule': 'evenodd' })
     )
   );
 };

lib/components/icons.js

@@ -56,3 +56,3 @@ var _require = require('preact'),
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon retry", width: "28", height: "31", viewBox: "0 0 16 19", xmlns: "http://www.w3.org/2000/svg" },
+    { "aria-hidden": "true", "class": "UppyIcon retry", width: "28", height: "31", viewBox: "0 0 16 19" },
     h("path", { d: "M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" }),
@@ -76,4 +76,4 @@ h("path", { d: "M7.9 3H10v2H7.9z" }),
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon", width: "55", height: "55", viewBox: "0 0 55 55" },
-    h("path", { d: "M52.66.25c-.216-.19-.5-.276-.79-.242l-31 4.01a1 1 0 0 0-.87.992V40.622C18.174 38.428 15.273 37 12 37c-5.514 0-10 4.037-10 9s4.486 9 10 9 10-4.037 10-9c0-.232-.02-.46-.04-.687.014-.065.04-.124.04-.192V16.12l29-3.753v18.257C49.174 28.428 46.273 27 43 27c-5.514 0-10 4.037-10 9s4.486 9 10 9c5.464 0 9.913-3.966 9.993-8.867 0-.013.007-.024.007-.037V1a.998.998 0 0 0-.34-.75zM12 53c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zm31-10c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zM22 14.1V5.89l29-3.753v8.21l-29 3.754z" })
+    { "aria-hidden": "true", "class": "UppyIcon", width: "25", height: "25", viewBox: "0 0 25 25" },
+    h("path", { d: "M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z", fill: "#049BCF", "fill-rule": "nonzero" })
   );
@@ -85,5 +85,4 @@ }
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon", viewBox: "0 0 58 58" },
-    h("path", { d: "M36.537 28.156l-11-7a1.005 1.005 0 0 0-1.02-.033C24.2 21.3 24 21.635 24 22v14a1 1 0 0 0 1.537.844l11-7a1.002 1.002 0 0 0 0-1.688zM26 34.18V23.82L34.137 29 26 34.18z" }),
-    h("path", { d: "M57 6H1a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM10 28H2v-9h8v9zm-8 2h8v9H2v-9zm10 10V8h34v42H12V40zm44-12h-8v-9h8v9zm-8 2h8v9h-8v-9zm8-22v9h-8V8h8zM2 8h8v9H2V8zm0 42v-9h8v9H2zm54 0h-8v-9h8v9z" })
+    { "aria-hidden": "true", "class": "UppyIcon", width: "25", height: "25", viewBox: "0 0 25 25" },
+    h("path", { d: "M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z", fill: "#19AF67", "fill-rule": "nonzero" })
   );
@@ -95,4 +94,4 @@ }
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon", viewBox: "0 0 342 335" },
-    h("path", { d: "M329.337 227.84c-2.1 1.3-8.1 2.1-11.9 2.1-12.4 0-27.6-5.7-49.1-14.9 8.3-.6 15.8-.9 22.6-.9 12.4 0 16 0 28.2 3.1 12.1 3 12.2 9.3 10.2 10.6zm-215.1 1.9c4.8-8.4 9.7-17.3 14.7-26.8 12.2-23.1 20-41.3 25.7-56.2 11.5 20.9 25.8 38.6 42.5 52.8 2.1 1.8 4.3 3.5 6.7 5.3-34.1 6.8-63.6 15-89.6 24.9zm39.8-218.9c6.8 0 10.7 17.06 11 33.16.3 16-3.4 27.2-8.1 35.6-3.9-12.4-5.7-31.8-5.7-44.5 0 0-.3-24.26 2.8-24.26zm-133.4 307.2c3.9-10.5 19.1-31.3 41.6-49.8 1.4-1.1 4.9-4.4 8.1-7.4-23.5 37.6-39.3 52.5-49.7 57.2zm315.2-112.3c-6.8-6.7-22-10.2-45-10.5-15.6-.2-34.3 1.2-54.1 3.9-8.8-5.1-17.9-10.6-25.1-17.3-19.2-18-35.2-42.9-45.2-70.3.6-2.6 1.2-4.8 1.7-7.1 0 0 10.8-61.5 7.9-82.3-.4-2.9-.6-3.7-1.4-5.9l-.9-2.5c-2.9-6.76-8.7-13.96-17.8-13.57l-5.3-.17h-.1c-10.1 0-18.4 5.17-20.5 12.84-6.6 24.3.2 60.5 12.5 107.4l-3.2 7.7c-8.8 21.4-19.8 43-29.5 62l-1.3 2.5c-10.2 20-19.5 37-27.9 51.4l-8.7 4.6c-.6.4-15.5 8.2-19 10.3-29.6 17.7-49.28 37.8-52.54 53.8-1.04 5-.26 11.5 5.01 14.6l8.4 4.2c3.63 1.8 7.53 2.7 11.43 2.7 21.1 0 45.6-26.2 79.3-85.1 39-12.7 83.4-23.3 122.3-29.1 29.6 16.7 66 28.3 89 28.3 4.1 0 7.6-.4 10.5-1.2 4.4-1.1 8.1-3.6 10.4-7.1 4.4-6.7 5.4-15.9 4.1-25.4-.3-2.8-2.6-6.3-5-8.7z" })
+    { "aria-hidden": "true", "class": "UppyIcon", width: "25", height: "25", viewBox: "0 0 25 25" },
+    h("path", { d: "M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z", fill: "#E2514A", "fill-rule": "nonzero" })
   );
@@ -104,4 +103,9 @@ }
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon", width: "44", height: "58", viewBox: "0 0 44 58" },
-    h("path", { d: "M27.437.517a1 1 0 0 0-.094.03H4.25C2.037.548.217 2.368.217 4.58v48.405c0 2.212 1.82 4.03 4.03 4.03H39.03c2.21 0 4.03-1.818 4.03-4.03V15.61a1 1 0 0 0-.03-.28 1 1 0 0 0 0-.093 1 1 0 0 0-.03-.032 1 1 0 0 0 0-.03 1 1 0 0 0-.032-.063 1 1 0 0 0-.03-.063 1 1 0 0 0-.032 0 1 1 0 0 0-.03-.063 1 1 0 0 0-.032-.03 1 1 0 0 0-.03-.063 1 1 0 0 0-.063-.062l-14.593-14a1 1 0 0 0-.062-.062A1 1 0 0 0 28 .708a1 1 0 0 0-.374-.157 1 1 0 0 0-.156 0 1 1 0 0 0-.03-.03l-.003-.003zM4.25 2.547h22.218v9.97c0 2.21 1.82 4.03 4.03 4.03h10.564v36.438a2.02 2.02 0 0 1-2.032 2.032H4.25c-1.13 0-2.032-.9-2.032-2.032V4.58c0-1.13.902-2.032 2.03-2.032zm24.218 1.345l10.375 9.937.75.718H30.5c-1.13 0-2.032-.9-2.032-2.03V3.89z" })
+    { "aria-hidden": "true", "class": "UppyIcon", width: "25", height: "25", viewBox: "0 0 25 25" },
+    h(
+      "g",
+      { fill: "#A7AFB7", "fill-rule": "nonzero" },
+      h("path", { d: "M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" }),
+      h("path", { d: "M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" })
+    )
   );
@@ -113,4 +117,4 @@ }
     "svg",
-    { "aria-hidden": "true", "class": "UppyIcon", width: "62", height: "62", viewBox: "0 0 62 62", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { d: "M4.309 4.309h24.912v53.382h-6.525v3.559h16.608v-3.559h-6.525V4.309h24.912v10.676h3.559V.75H.75v14.235h3.559z", "fill-rule": "nonzero", fill: "#000" })
+    { "aria-hidden": "true", "class": "UppyIcon", width: "25", height: "25", viewBox: "0 0 25 25" },
+    h("path", { d: "M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z", fill: "#5A5E69", "fill-rule": "nonzero" })
   );
@@ -117,0 +121,0 @@ }

lib/components/PickerPanelTopBar.js

@@ -106,4 +106,4 @@ var _require = require('preact'),
         'svg',
-        { 'class': 'UppyIcon', width: '15', height: '15', viewBox: '0 0 13 13', version: '1.1', xmlns: 'http://www.w3.org/2000/svg' },
-        h('path', { d: 'M7,6 L13,6 L13,7 L7,7 L7,13 L6,13 L6,7 L0,7 L0,6 L6,6 L6,0 L7,0 L7,6 Z' })
+        { 'class': 'UppyIcon', width: '15', height: '15', viewBox: '0 0 15 15' },
+        h('path', { d: 'M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z' })
       )
@@ -110,0 +110,0 @@ )

lib/index.js

@@ -13,3 +13,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var Translator = require('@uppy/utils/lib/Translator');
-var dragDrop = require('drag-drop');
 var DashboardUI = require('./components/Dashboard');
@@ -21,2 +20,3 @@ var StatusBar = require('@uppy/status-bar');
 var toArray = require('@uppy/utils/lib/toArray');
+var getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles');
 var cuid = require('cuid');
@@ -63,7 +63,5 @@ var ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill');
 
-    var defaultLocale = {
+    _this.defaultLocale = {
       strings: {
-        selectToUpload: 'Select files to upload',
         closeModal: 'Close Modal',
-        upload: 'Upload',
         importFrom: 'Import from %{name}',
@@ -81,3 +79,2 @@ addingMoreFiles: 'Adding more files',
         back: 'Back',
-        name: 'Name',
         removeFile: 'Remove file',
@@ -90,10 +87,7 @@ editFile: 'Edit file',
         cancel: 'Cancel',
-        localDisk: 'Local Disk',
         myDevice: 'My Device',
         dropPasteImport: 'Drop files here, paste, %{browse} or import from',
         dropPaste: 'Drop files here, paste or %{browse}',
+        dropHint: 'Drop your files here',
         browse: 'browse',
-        fileProgress: 'File progress: upload speed and ETA',
-        numberOfSelectedFiles: 'Number of selected files',
-        uploadAllNewFiles: 'Upload all new files',
         emptyFolderAdded: 'No files were added from empty folder',
@@ -108,23 +102,19 @@ uploadComplete: 'Upload complete',
           0: '%{smart_count} file selected',
-          1: '%{smart_count} files selected'
+          1: '%{smart_count} files selected',
+          2: '%{smart_count} files selected'
         },
-        uploadXFiles: {
-          0: 'Upload %{smart_count} file',
-          1: 'Upload %{smart_count} files'
-        },
         uploadingXFiles: {
           0: 'Uploading %{smart_count} file',
-          1: 'Uploading %{smart_count} files'
+          1: 'Uploading %{smart_count} files',
+          2: 'Uploading %{smart_count} files'
         },
         processingXFiles: {
           0: 'Processing %{smart_count} file',
-          1: 'Processing %{smart_count} files'
+          1: 'Processing %{smart_count} files',
+          2: 'Processing %{smart_count} files'
         },
-        uploadXNewFiles: {
-          0: 'Upload +%{smart_count} file',
-          1: 'Upload +%{smart_count} files'
-        },
         folderAdded: {
           0: 'Added %{smart_count} file from %{folder}',
-          1: 'Added %{smart_count} files from %{folder}'
+          1: 'Added %{smart_count} files from %{folder}',
+          2: 'Added %{smart_count} files from %{folder}'
         }
@@ -168,3 +158,3 @@ }
     // i18n
-    _this.translator = new Translator([defaultLocale, _this.uppy.locale, _this.opts.locale]);
+    _this.translator = new Translator([_this.defaultLocale, _this.uppy.locale, _this.opts.locale]);
     _this.i18n = _this.translator.translate.bind(_this.translator);
@@ -194,3 +184,2 @@ _this.i18nArray = _this.translator.translateArray.bind(_this.translator);
     _this.toggleAddFilesPanel = _this.toggleAddFilesPanel.bind(_this);
-    _this.handleDrop = _this.handleDrop.bind(_this);
     _this.handlePaste = _this.handlePaste.bind(_this);
@@ -200,2 +189,10 @@ _this.handleInputChange = _this.handleInputChange.bind(_this);
     _this.install = _this.install.bind(_this);
+
+    _this.handleDragOver = _this.handleDragOver.bind(_this);
+    _this.handleDragLeave = _this.handleDragLeave.bind(_this);
+    _this.handleDrop = _this.handleDrop.bind(_this);
+
+    // Timeouts
+    _this.makeDashboardInsidesVisibleAnywayTimeout = null;
+    _this.removeDragOverClassTimeout = null;
     return _this;
@@ -269,5 +266,4 @@ }
       return this.opts.onRequestCloseModal();
-    } else {
-      this.closeModal();
     }
+    return this.closeModal();
   };
@@ -467,49 +463,49 @@
 
-  Dashboard.prototype.handlePaste = function handlePaste(ev) {
+  Dashboard.prototype.handlePaste = function handlePaste(event) {
     var _this4 = this;
 
-    var files = toArray(ev.clipboardData.items);
+    // 1. Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
+    this.uppy.iteratePlugins(function (plugin) {
+      if (plugin.type === 'acquirer') {
+        // Every Plugin with .type acquirer can define handleRootPaste(event)
+        plugin.handleRootPaste && plugin.handleRootPaste(event);
+      }
+    });
+
+    // 2. Add all dropped files
+    var files = toArray(event.clipboardData.files);
     files.forEach(function (file) {
-      if (file.kind !== 'file') return;
-
-      var blob = file.getAsFile();
-      if (!blob) {
-        _this4.uppy.log('[Dashboard] File pasted, but the file blob is empty');
-        _this4.uppy.info('Error pasting file', 'error');
-        return;
-      }
       _this4.uppy.log('[Dashboard] File pasted');
-      try {
-        _this4.uppy.addFile({
-          source: _this4.id,
-          name: file.name,
-          type: file.type,
-          data: blob
-        });
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
+      _this4.addFile(file);
     });
   };
 
-  Dashboard.prototype.handleInputChange = function handleInputChange(ev) {
+  Dashboard.prototype.handleInputChange = function handleInputChange(event) {
     var _this5 = this;
 
-    ev.preventDefault();
-    var files = toArray(ev.target.files);
-
+    event.preventDefault();
+    var files = toArray(event.target.files);
     files.forEach(function (file) {
-      try {
-        _this5.uppy.addFile({
-          source: _this5.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        });
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
+      return _this5.addFile(file);
     });
   };
 
+  Dashboard.prototype.addFile = function addFile(file) {
+    try {
+      this.uppy.addFile({
+        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
+        }
+      });
+    } catch (err) {
+      // Nothing, restriction errors handled in Core
+    }
+  };
+
   // _Why make insides of Dashboard invisible until first ResizeObserver event is emitted?
@@ -576,5 +572,57 @@ //  ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .uppy-size-- to another (e.g. in Safari)
 
-  Dashboard.prototype.initEvents = function initEvents() {
+  Dashboard.prototype.handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    clearTimeout(this.removeDragOverClassTimeout);
+    this.setPluginState({ isDraggingOver: true });
+  };
+
+  Dashboard.prototype.handleDragLeave = function handleDragLeave(event) {
     var _this7 = this;
 
+    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(function () {
+      _this7.setPluginState({ isDraggingOver: false });
+    }, 50);
+  };
+
+  Dashboard.prototype.handleDrop = function handleDrop(event, dropCategory) {
+    var _this8 = this;
+
+    event.preventDefault();
+    event.stopPropagation();
+    clearTimeout(this.removeDragOverClassTimeout);
+    // 1. Add a small (+) icon on drop
+    event.dataTransfer.dropEffect = 'copy';
+
+    // 2. Remove dragover class
+    this.setPluginState({ isDraggingOver: false });
+
+    // 3. Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+    this.uppy.iteratePlugins(function (plugin) {
+      if (plugin.type === 'acquirer') {
+        // Every Plugin with .type acquirer can define handleRootDrop(event)
+        plugin.handleRootDrop && plugin.handleRootDrop(event);
+      }
+    });
+
+    // 4. Add all dropped files
+    getDroppedFiles(event.dataTransfer).then(function (files) {
+      if (files.length > 0) {
+        _this8.uppy.log('[Dashboard] Files were dropped');
+        files.forEach(function (file) {
+          return _this8.addFile(file);
+        });
+      }
+    });
+  };
+
+  Dashboard.prototype.initEvents = function initEvents() {
+    var _this9 = this;
+
     // Modal open button
@@ -584,3 +632,3 @@ var showModalTrigger = findAllDOMElements(this.opts.trigger);
       showModalTrigger.forEach(function (trigger) {
-        return trigger.addEventListener('click', _this7.openModal);
+        return trigger.addEventListener('click', _this9.openModal);
       });
@@ -593,7 +641,2 @@ }
 
-    // Drag Drop
-    this.removeDragDropListener = dragDrop(this.el, function (files) {
-      _this7.handleDrop(files);
-    });
-
     this.startListeningToResize();
@@ -621,3 +664,3 @@
   Dashboard.prototype.removeEvents = function removeEvents() {
-    var _this8 = this;
+    var _this10 = this;
 
@@ -627,3 +670,3 @@ var showModalTrigger = findAllDOMElements(this.opts.trigger);
       showModalTrigger.forEach(function (trigger) {
-        return trigger.removeEventListener('click', _this8.openModal);
+        return trigger.removeEventListener('click', _this10.openModal);
       });
@@ -634,4 +677,2 @@ }
 
-    this.removeDragDropListener();
-    // window.removeEventListener('resize', this.throttledUpdateDashboardElWidth)
     window.removeEventListener('popstate', this.handlePopState, false);
@@ -657,23 +698,4 @@ this.uppy.off('plugin-remove', this.removeTarget);
 
-  Dashboard.prototype.handleDrop = function handleDrop(files) {
-    var _this9 = this;
-
-    this.uppy.log('[Dashboard] Files were dropped');
-
-    files.forEach(function (file) {
-      try {
-        _this9.uppy.addFile({
-          source: _this9.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        });
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
-    });
-  };
-
   Dashboard.prototype.render = function render(state) {
-    var _this10 = this;
+    var _this11 = this;
 
@@ -729,5 +751,5 @@ var pluginState = this.getPluginState();
     var attachRenderFunctionToTarget = function attachRenderFunctionToTarget(target) {
-      var plugin = _this10.uppy.getPlugin(target.id);
+      var plugin = _this11.uppy.getPlugin(target.id);
       return _extends({}, target, {
-        icon: plugin.icon || _this10.opts.defaultPickerIcon,
+        icon: plugin.icon || _this11.opts.defaultPickerIcon,
         render: plugin.render
@@ -738,3 +760,3 @@ });
     var isSupported = function isSupported(target) {
-      var plugin = _this10.uppy.getPlugin(target.id);
+      var plugin = _this11.uppy.getPlugin(target.id);
       // If the plugin does not provide a `supported` check, assume the plugin works everywhere.
@@ -756,5 +778,5 @@ if (typeof plugin.isSupported !== 'function') {
     var startUpload = function startUpload(ev) {
-      _this10.uppy.upload().catch(function (err) {
+      _this11.uppy.upload().catch(function (err) {
         // Log error.
-        _this10.uppy.log(err.stack || err.message || err);
+        _this11.uppy.log(err.stack || err.message || err);
       });
@@ -764,8 +786,8 @@ };
     var cancelUpload = function cancelUpload(fileID) {
-      _this10.uppy.removeFile(fileID);
+      _this11.uppy.removeFile(fileID);
     };
 
     var saveFileCard = function saveFileCard(meta, fileID) {
-      _this10.uppy.setFileMeta(fileID, meta);
-      _this10.toggleFileCard();
+      _this11.uppy.setFileMeta(fileID, meta);
+      _this11.toggleFileCard();
     };
@@ -815,3 +837,3 @@
       resumableUploads: capabilities.resumableUploads || false,
-      bundled: capabilities.bundled || false,
+      individualCancellation: capabilities.individualCancellation,
       startUpload: startUpload,
@@ -839,3 +861,8 @@ pauseUpload: this.uppy.pauseResume,
       maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles,
-      showSelectedFiles: this.opts.showSelectedFiles
+      showSelectedFiles: this.opts.showSelectedFiles,
+      // drag props
+      isDraggingOver: pluginState.isDraggingOver,
+      handleDragOver: this.handleDragOver,
+      handleDragLeave: this.handleDragLeave,
+      handleDrop: this.handleDrop
     });
@@ -845,7 +872,7 @@ };
   Dashboard.prototype.discoverProviderPlugins = function discoverProviderPlugins() {
-    var _this11 = this;
+    var _this12 = this;
 
     this.uppy.iteratePlugins(function (plugin) {
-      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this11.constructor) {
-        _this11.addTarget(plugin);
+      if (plugin && !plugin.target && plugin.opts && plugin.opts.target === _this12.constructor) {
+        _this12.addTarget(plugin);
       }
@@ -856,3 +883,3 @@ });
   Dashboard.prototype.install = function install() {
-    var _this12 = this;
+    var _this13 = this;
 
@@ -894,5 +921,5 @@ // Set default state for Dashboard
     plugins.forEach(function (pluginID) {
-      var plugin = _this12.uppy.getPlugin(pluginID);
+      var plugin = _this13.uppy.getPlugin(pluginID);
       if (plugin) {
-        plugin.mount(_this12, plugin);
+        plugin.mount(_this13, plugin);
       }
@@ -935,3 +962,3 @@ });
   Dashboard.prototype.uninstall = function uninstall() {
-    var _this13 = this;
+    var _this14 = this;
 
@@ -957,3 +984,3 @@ if (!this.opts.disableInformer) {
     plugins.forEach(function (pluginID) {
-      var plugin = _this13.uppy.getPlugin(pluginID);
+      var plugin = _this14.uppy.getPlugin(pluginID);
       if (plugin) plugin.unmount();
@@ -960,0 +987,0 @@ });

lib/utils/getFileTypeIcon.js

 var _require = require('../components/icons'),
+    iconFile = _require.iconFile,
     iconText = _require.iconText,
@@ -9,4 +10,4 @@ iconAudio = _require.iconAudio,
   var defaultChoice = {
-    color: '#cbcbcb',
-    icon: ''
+    color: '#838999',
+    icon: iconFile()
   };
@@ -21,3 +22,3 @@
     return {
-      color: '#cbcbcb',
+      color: '#5a5e69',
       icon: iconText()
@@ -29,3 +30,3 @@ };
     return {
-      color: '#1abc9c',
+      color: '#068dbb',
       icon: iconAudio()
@@ -37,3 +38,3 @@ };
     return {
-      color: '#2980b9',
+      color: '#19af67',
       icon: iconVideo()
@@ -45,3 +46,3 @@ };
     return {
-      color: '#e74c3c',
+      color: '#e25149',
       icon: iconPDF()
@@ -48,0 +49,0 @@ };

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "0.30.4",
+  "version": "0.30.5",
   "license": "MIT",
@@ -25,7 +25,7 @@ "main": "lib/index.js",
   "dependencies": {
-    "@uppy/informer": "0.30.4",
-    "@uppy/provider-views": "0.30.4",
-    "@uppy/status-bar": "0.30.4",
-    "@uppy/thumbnail-generator": "0.30.4",
-    "@uppy/utils": "0.30.4",
+    "@uppy/informer": "0.30.5",
+    "@uppy/provider-views": "0.30.5",
+    "@uppy/status-bar": "0.30.5",
+    "@uppy/thumbnail-generator": "0.30.5",
+    "@uppy/utils": "0.30.5",
     "classnames": "^2.2.6",
@@ -41,4 +41,4 @@ "cuid": "^2.1.1",
   "devDependencies": {
-    "@uppy/core": "0.30.4",
-    "@uppy/google-drive": "0.30.4"
+    "@uppy/core": "0.30.5",
+    "@uppy/google-drive": "0.30.5"
   },
@@ -48,3 +48,3 @@ "peerDependencies": {
   },
-  "gitHead": "7ae8af44abdd42eef71c46b831b2e3dadb00237f"
+  "gitHead": "0f95529cc56175c017e149dd3a122a3bcf9325b7"
 }

src/components/AddFiles.js

@@ -6,3 +6,3 @@ const ActionBrowseTagline = require('./ActionBrowseTagline')
 const poweredByUppy = (props) => {
-  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+  return <a tabindex="-1" href="https://uppy.io" rel="noreferrer noopener" target="_blank" class="uppy-Dashboard-poweredBy">Powered by <svg aria-hidden="true" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
     <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
@@ -9,0 +9,0 @@ </svg><span class="uppy-Dashboard-poweredByUppy">Uppy</span></a>

src/components/Dashboard.js

@@ -35,2 +35,3 @@ const FileList = require('./FileList')
     { 'uppy-Dashboard--isClosing': props.isClosing },
+    { 'uppy-Dashboard--isDraggingOver': props.isDraggingOver },
     { 'uppy-Dashboard--modal': !props.inline },
@@ -48,4 +49,8 @@ { 'uppy-size--md': props.containerWidth > 576 },
       aria-label={!props.inline ? props.i18n('dashboardWindowTitle') : props.i18n('dashboardTitle')}
-      onpaste={props.handlePaste}>
+      onpaste={props.handlePaste}
 
+      onDragOver={props.handleDragOver}
+      onDragLeave={props.handleDragLeave}
+      onDrop={props.handleDrop}
+    >
       <div class="uppy-Dashboard-overlay" tabindex={-1} onclick={props.handleClickOutside} />
@@ -73,2 +78,6 @@
         <div class="uppy-Dashboard-innerWrap">
+          <div class="uppy-Dashboard-dropFilesHereHint">
+            {props.i18n('dropHint')}
+          </div>
+
           { (!noFiles && props.showSelectedFiles) && <PanelTopBar {...props} /> }
@@ -75,0 +84,0 @@

src/components/FileItem.js

@@ -18,3 +18,2 @@ const getFileNameAndExtension = require('@uppy/utils/lib/getFileNameAndExtension')
   if (props.isUploaded ||
-      props.bundled ||
       (props.hidePauseResumeCancelButtons && !props.error)) {
@@ -26,3 +25,3 @@ return <div class="uppy-DashboardItem-progressIndicator">
         hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
-        bundled={props.bundled}
+        individualCancellation={props.individualCancellation}
       />
@@ -43,2 +42,3 @@ </div>
         fileID={props.file.id}
+        individualCancellation={props.individualCancellation}
         hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
@@ -50,3 +50,3 @@ />
 
-module.exports = function fileItem (props) {
+module.exports = function FileItem (props) {
   const file = props.file
@@ -79,3 +79,3 @@ const acquirers = props.acquirers
       props.pauseUpload(file.id)
-    } else {
+    } else if (props.individualCancellation) {
       props.cancelUpload(file.id)
@@ -99,5 +99,7 @@ }
       return props.i18n('pauseUpload')
-    } else {
+    } else if (props.individualCancellation) {
       return props.i18n('cancelUpload')
     }
+
+    return ''
   }
@@ -113,5 +115,9 @@
     { 'is-resumable': props.resumableUploads },
-    { 'is-bundled': props.bundledUpload }
+    { 'is-noIndividualCancellation': !props.individualCancellation }
   )
 
+  const showRemoveButton = props.individualCancellation
+    ? !isUploaded
+    : !uploadInProgress && !isUploaded
+
   return <li class={dashboardItemClass} id={`uppy_${file.id}`} title={file.meta.name}>
@@ -184,3 +190,3 @@ <div class="uppy-DashboardItem-preview">
     <div class="uppy-DashboardItem-action">
-      {!isUploaded &&
+      {showRemoveButton &&
         <button class="uppy-DashboardItem-remove"
@@ -191,5 +197,5 @@ type="button"
           onclick={() => props.removeFile(file.id)}>
-          <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
-            <path stroke="#FFF" stroke-width="1" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
-            <path fill="#FFF" vector-effect="non-scaling-stroke" d="M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z" />
+          <svg aria-hidden="true" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
+            <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
+            <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
           </svg>
@@ -196,0 +202,0 @@ </button>

src/components/FileItemProgress.js

@@ -22,3 +22,3 @@ const { h } = require('preact')
       </g>
-      {!props.hidePauseResumeCancelButtons && !props.bundled ? (
+      {!props.hidePauseResumeCancelButtons ? (
         <g>
@@ -25,0 +25,0 @@ <polygon class="play" transform="translate(3, 3)" points="12 20 12 10 20 15" />

src/components/FilePreview.js

@@ -16,5 +16,5 @@ const getFileTypeIcon = require('../utils/getFileTypeIcon')
       <span class="uppy-DashboardItem-previewIcon" style={{ color: color }}>{icon}</span>
-      <svg class="uppy-DashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF" /><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4" /></g></svg>
+      <svg class="uppy-DashboardItem-previewIconBg" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
     </div>
   )
 }

src/components/icons.js

@@ -41,3 +41,3 @@ const { h } = require('preact')
 function iconRetry () {
-  return <svg aria-hidden="true" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19" xmlns="http://www.w3.org/2000/svg">
+  return <svg aria-hidden="true" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19">
     <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
@@ -57,4 +57,4 @@ <path d="M7.9 3H10v2H7.9z" />
 function iconAudio () {
-  return <svg aria-hidden="true" class="UppyIcon" width="55" height="55" viewBox="0 0 55 55">
-    <path d="M52.66.25c-.216-.19-.5-.276-.79-.242l-31 4.01a1 1 0 0 0-.87.992V40.622C18.174 38.428 15.273 37 12 37c-5.514 0-10 4.037-10 9s4.486 9 10 9 10-4.037 10-9c0-.232-.02-.46-.04-.687.014-.065.04-.124.04-.192V16.12l29-3.753v18.257C49.174 28.428 46.273 27 43 27c-5.514 0-10 4.037-10 9s4.486 9 10 9c5.464 0 9.913-3.966 9.993-8.867 0-.013.007-.024.007-.037V1a.998.998 0 0 0-.34-.75zM12 53c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zm31-10c-4.41 0-8-3.14-8-7s3.59-7 8-7 8 3.14 8 7-3.59 7-8 7zM22 14.1V5.89l29-3.753v8.21l-29 3.754z" />
+  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+    <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fill-rule="nonzero" />
   </svg>
@@ -64,4 +64,4 @@ }
 function iconVideo () {
-  return <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 58 58">
-    <path d="M36.537 28.156l-11-7a1.005 1.005 0 0 0-1.02-.033C24.2 21.3 24 21.635 24 22v14a1 1 0 0 0 1.537.844l11-7a1.002 1.002 0 0 0 0-1.688zM26 34.18V23.82L34.137 29 26 34.18z" /><path d="M57 6H1a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM10 28H2v-9h8v9zm-8 2h8v9H2v-9zm10 10V8h34v42H12V40zm44-12h-8v-9h8v9zm-8 2h8v9h-8v-9zm8-22v9h-8V8h8zM2 8h8v9H2V8zm0 42v-9h8v9H2zm54 0h-8v-9h8v9z" />
+  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+    <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fill-rule="nonzero" />
   </svg>
@@ -71,4 +71,4 @@ }
 function iconPDF () {
-  return <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 342 335">
-    <path d="M329.337 227.84c-2.1 1.3-8.1 2.1-11.9 2.1-12.4 0-27.6-5.7-49.1-14.9 8.3-.6 15.8-.9 22.6-.9 12.4 0 16 0 28.2 3.1 12.1 3 12.2 9.3 10.2 10.6zm-215.1 1.9c4.8-8.4 9.7-17.3 14.7-26.8 12.2-23.1 20-41.3 25.7-56.2 11.5 20.9 25.8 38.6 42.5 52.8 2.1 1.8 4.3 3.5 6.7 5.3-34.1 6.8-63.6 15-89.6 24.9zm39.8-218.9c6.8 0 10.7 17.06 11 33.16.3 16-3.4 27.2-8.1 35.6-3.9-12.4-5.7-31.8-5.7-44.5 0 0-.3-24.26 2.8-24.26zm-133.4 307.2c3.9-10.5 19.1-31.3 41.6-49.8 1.4-1.1 4.9-4.4 8.1-7.4-23.5 37.6-39.3 52.5-49.7 57.2zm315.2-112.3c-6.8-6.7-22-10.2-45-10.5-15.6-.2-34.3 1.2-54.1 3.9-8.8-5.1-17.9-10.6-25.1-17.3-19.2-18-35.2-42.9-45.2-70.3.6-2.6 1.2-4.8 1.7-7.1 0 0 10.8-61.5 7.9-82.3-.4-2.9-.6-3.7-1.4-5.9l-.9-2.5c-2.9-6.76-8.7-13.96-17.8-13.57l-5.3-.17h-.1c-10.1 0-18.4 5.17-20.5 12.84-6.6 24.3.2 60.5 12.5 107.4l-3.2 7.7c-8.8 21.4-19.8 43-29.5 62l-1.3 2.5c-10.2 20-19.5 37-27.9 51.4l-8.7 4.6c-.6.4-15.5 8.2-19 10.3-29.6 17.7-49.28 37.8-52.54 53.8-1.04 5-.26 11.5 5.01 14.6l8.4 4.2c3.63 1.8 7.53 2.7 11.43 2.7 21.1 0 45.6-26.2 79.3-85.1 39-12.7 83.4-23.3 122.3-29.1 29.6 16.7 66 28.3 89 28.3 4.1 0 7.6-.4 10.5-1.2 4.4-1.1 8.1-3.6 10.4-7.1 4.4-6.7 5.4-15.9 4.1-25.4-.3-2.8-2.6-6.3-5-8.7z" />
+  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+    <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fill-rule="nonzero" />
   </svg>
@@ -78,4 +78,7 @@ }
 function iconFile () {
-  return <svg aria-hidden="true" class="UppyIcon" width="44" height="58" viewBox="0 0 44 58">
-    <path d="M27.437.517a1 1 0 0 0-.094.03H4.25C2.037.548.217 2.368.217 4.58v48.405c0 2.212 1.82 4.03 4.03 4.03H39.03c2.21 0 4.03-1.818 4.03-4.03V15.61a1 1 0 0 0-.03-.28 1 1 0 0 0 0-.093 1 1 0 0 0-.03-.032 1 1 0 0 0 0-.03 1 1 0 0 0-.032-.063 1 1 0 0 0-.03-.063 1 1 0 0 0-.032 0 1 1 0 0 0-.03-.063 1 1 0 0 0-.032-.03 1 1 0 0 0-.03-.063 1 1 0 0 0-.063-.062l-14.593-14a1 1 0 0 0-.062-.062A1 1 0 0 0 28 .708a1 1 0 0 0-.374-.157 1 1 0 0 0-.156 0 1 1 0 0 0-.03-.03l-.003-.003zM4.25 2.547h22.218v9.97c0 2.21 1.82 4.03 4.03 4.03h10.564v36.438a2.02 2.02 0 0 1-2.032 2.032H4.25c-1.13 0-2.032-.9-2.032-2.032V4.58c0-1.13.902-2.032 2.03-2.032zm24.218 1.345l10.375 9.937.75.718H30.5c-1.13 0-2.032-.9-2.032-2.03V3.89z" />
+  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+    <g fill="#A7AFB7" fill-rule="nonzero">
+      <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+      <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+    </g>
   </svg>
@@ -85,4 +88,4 @@ }
 function iconText () {
-  return <svg aria-hidden="true" class="UppyIcon" width="62" height="62" viewBox="0 0 62 62" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.309 4.309h24.912v53.382h-6.525v3.559h16.608v-3.559h-6.525V4.309h24.912v10.676h3.559V.75H.75v14.235h3.559z" fill-rule="nonzero" fill="#000" />
+  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+    <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fill-rule="nonzero" />
   </svg>
@@ -89,0 +92,0 @@ }

src/components/PickerPanelTopBar.js

@@ -97,4 +97,4 @@ const { h } = require('preact')
           onclick={() => props.toggleAddFilesPanel(true)}>
-          <svg class="UppyIcon" width="15" height="15" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7,6 L13,6 L13,7 L7,7 L7,13 L6,13 L6,7 L0,7 L0,6 L6,6 L6,0 L7,0 L7,6 Z" />
+          <svg class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
+            <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
           </svg>
@@ -101,0 +101,0 @@ </button>

src/index.js

 const { Plugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
-const dragDrop = require('drag-drop')
 const DashboardUI = require('./components/Dashboard')
@@ -10,2 +9,3 @@ const StatusBar = require('@uppy/status-bar')
 const toArray = require('@uppy/utils/lib/toArray')
+const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 const cuid = require('cuid')
@@ -55,7 +55,5 @@ const ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill')
 
-    const defaultLocale = {
+    this.defaultLocale = {
       strings: {
-        selectToUpload: 'Select files to upload',
         closeModal: 'Close Modal',
-        upload: 'Upload',
         importFrom: 'Import from %{name}',
@@ -73,3 +71,2 @@ addingMoreFiles: 'Adding more files',
         back: 'Back',
-        name: 'Name',
         removeFile: 'Remove file',
@@ -82,10 +79,7 @@ editFile: 'Edit file',
         cancel: 'Cancel',
-        localDisk: 'Local Disk',
         myDevice: 'My Device',
         dropPasteImport: 'Drop files here, paste, %{browse} or import from',
         dropPaste: 'Drop files here, paste or %{browse}',
+        dropHint: 'Drop your files here',
         browse: 'browse',
-        fileProgress: 'File progress: upload speed and ETA',
-        numberOfSelectedFiles: 'Number of selected files',
-        uploadAllNewFiles: 'Upload all new files',
         emptyFolderAdded: 'No files were added from empty folder',
@@ -100,23 +94,19 @@ uploadComplete: 'Upload complete',
           0: '%{smart_count} file selected',
-          1: '%{smart_count} files selected'
+          1: '%{smart_count} files selected',
+          2: '%{smart_count} files selected'
         },
-        uploadXFiles: {
-          0: 'Upload %{smart_count} file',
-          1: 'Upload %{smart_count} files'
-        },
         uploadingXFiles: {
           0: 'Uploading %{smart_count} file',
-          1: 'Uploading %{smart_count} files'
+          1: 'Uploading %{smart_count} files',
+          2: 'Uploading %{smart_count} files'
         },
         processingXFiles: {
           0: 'Processing %{smart_count} file',
-          1: 'Processing %{smart_count} files'
+          1: 'Processing %{smart_count} files',
+          2: 'Processing %{smart_count} files'
         },
-        uploadXNewFiles: {
-          0: 'Upload +%{smart_count} file',
-          1: 'Upload +%{smart_count} files'
-        },
         folderAdded: {
           0: 'Added %{smart_count} file from %{folder}',
-          1: 'Added %{smart_count} files from %{folder}'
+          1: 'Added %{smart_count} files from %{folder}',
+          2: 'Added %{smart_count} files from %{folder}'
         }
@@ -160,3 +150,3 @@ }
     // i18n
-    this.translator = new Translator([ defaultLocale, this.uppy.locale, this.opts.locale ])
+    this.translator = new Translator([ this.defaultLocale, this.uppy.locale, this.opts.locale ])
     this.i18n = this.translator.translate.bind(this.translator)
@@ -186,3 +176,2 @@ this.i18nArray = this.translator.translateArray.bind(this.translator)
     this.toggleAddFilesPanel = this.toggleAddFilesPanel.bind(this)
-    this.handleDrop = this.handleDrop.bind(this)
     this.handlePaste = this.handlePaste.bind(this)
@@ -192,2 +181,10 @@ this.handleInputChange = this.handleInputChange.bind(this)
     this.install = this.install.bind(this)
+
+    this.handleDragOver = this.handleDragOver.bind(this)
+    this.handleDragLeave = this.handleDragLeave.bind(this)
+    this.handleDrop = this.handleDrop.bind(this)
+
+    // Timeouts
+    this.makeDashboardInsidesVisibleAnywayTimeout = null
+    this.removeDragOverClassTimeout = null
   }
@@ -259,5 +256,4 @@
       return this.opts.onRequestCloseModal()
-    } else {
-      this.closeModal()
     }
+    return this.closeModal()
   }
@@ -441,43 +437,43 @@
 
-  handlePaste (ev) {
-    const files = toArray(ev.clipboardData.items)
+  handlePaste (event) {
+    // 1. Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
+    this.uppy.iteratePlugins((plugin) => {
+      if (plugin.type === 'acquirer') {
+        // Every Plugin with .type acquirer can define handleRootPaste(event)
+        plugin.handleRootPaste && plugin.handleRootPaste(event)
+      }
+    })
+
+    // 2. Add all dropped files
+    const files = toArray(event.clipboardData.files)
     files.forEach((file) => {
-      if (file.kind !== 'file') return
-
-      const blob = file.getAsFile()
-      if (!blob) {
-        this.uppy.log('[Dashboard] File pasted, but the file blob is empty')
-        this.uppy.info('Error pasting file', 'error')
-        return
-      }
       this.uppy.log('[Dashboard] File pasted')
-      try {
-        this.uppy.addFile({
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: blob
-        })
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
+      this.addFile(file)
     })
   }
 
-  handleInputChange (ev) {
-    ev.preventDefault()
-    const files = toArray(ev.target.files)
+  handleInputChange (event) {
+    event.preventDefault()
+    const files = toArray(event.target.files)
+    files.forEach((file) =>
+      this.addFile(file)
+    )
+  }
 
-    files.forEach((file) => {
-      try {
-        this.uppy.addFile({
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        })
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
-    })
+  addFile (file) {
+    try {
+      this.uppy.addFile({
+        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
+        }
+      })
+    } catch (err) {
+      // Nothing, restriction errors handled in Core
+    }
   }
@@ -527,2 +523,51 @@
 
+  handleDragOver (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    clearTimeout(this.removeDragOverClassTimeout)
+    this.setPluginState({ isDraggingOver: true })
+  }
+
+  handleDragLeave (event) {
+    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)
+  }
+
+  handleDrop (event, dropCategory) {
+    event.preventDefault()
+    event.stopPropagation()
+    clearTimeout(this.removeDragOverClassTimeout)
+    // 1. Add a small (+) icon on drop
+    event.dataTransfer.dropEffect = 'copy'
+
+    // 2. Remove dragover class
+    this.setPluginState({ isDraggingOver: false })
+
+    // 3. Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+    this.uppy.iteratePlugins((plugin) => {
+      if (plugin.type === 'acquirer') {
+        // Every Plugin with .type acquirer can define handleRootDrop(event)
+        plugin.handleRootDrop && plugin.handleRootDrop(event)
+      }
+    })
+
+    // 4. Add all dropped files
+    getDroppedFiles(event.dataTransfer)
+      .then((files) => {
+        if (files.length > 0) {
+          this.uppy.log('[Dashboard] Files were dropped')
+          files.forEach((file) =>
+            this.addFile(file)
+          )
+        }
+      })
+  }
+
   initEvents () {
@@ -539,7 +584,2 @@ // Modal open button
 
-    // Drag Drop
-    this.removeDragDropListener = dragDrop(this.el, (files) => {
-      this.handleDrop(files)
-    })
-
     this.startListeningToResize()
@@ -571,4 +611,2 @@
 
-    this.removeDragDropListener()
-    // window.removeEventListener('resize', this.throttledUpdateDashboardElWidth)
     window.removeEventListener('popstate', this.handlePopState, false)
@@ -594,19 +632,2 @@ this.uppy.off('plugin-remove', this.removeTarget)
 
-  handleDrop (files) {
-    this.uppy.log('[Dashboard] Files were dropped')
-
-    files.forEach((file) => {
-      try {
-        this.uppy.addFile({
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        })
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
-    })
-  }
-
   render (state) {
@@ -746,3 +767,3 @@ const pluginState = this.getPluginState()
       resumableUploads: capabilities.resumableUploads || false,
-      bundled: capabilities.bundled || false,
+      individualCancellation: capabilities.individualCancellation,
       startUpload,
@@ -770,3 +791,8 @@ pauseUpload: this.uppy.pauseResume,
       maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles,
-      showSelectedFiles: this.opts.showSelectedFiles
+      showSelectedFiles: this.opts.showSelectedFiles,
+      // drag props
+      isDraggingOver: pluginState.isDraggingOver,
+      handleDragOver: this.handleDragOver,
+      handleDragLeave: this.handleDragLeave,
+      handleDrop: this.handleDrop
     })
@@ -773,0 +799,0 @@ }

src/index.test.js

@@ -38,3 +38,3 @@ const Core = require('@uppy/core')
       })
-      core.use(GoogleDrivePlugin, { target: DashboardPlugin, serverUrl: 'https://fake.uppy.io/' })
+      core.use(GoogleDrivePlugin, { target: DashboardPlugin, companionUrl: 'https://fake.uppy.io/' })
     }).not.toThrow()
@@ -47,3 +47,3 @@
     const core = new Core()
-    core.use(GoogleDrivePlugin, { serverUrl: 'https://fake.uppy.io/' })
+    core.use(GoogleDrivePlugin, { companionUrl: 'https://fake.uppy.io/' })
 
@@ -50,0 +50,0 @@ expect(() => {

src/utils/getFileTypeIcon.js

@@ -1,7 +0,7 @@
-const { iconText, iconAudio, iconVideo, iconPDF } = require('../components/icons')
+const { iconFile, iconText, iconAudio, iconVideo, iconPDF } = require('../components/icons')
 
 module.exports = function getIconByMime (fileType) {
   const defaultChoice = {
-    color: '#cbcbcb',
-    icon: ''
+    color: '#838999',
+    icon: iconFile()
   }
@@ -16,3 +16,3 @@
     return {
-      color: '#cbcbcb',
+      color: '#5a5e69',
       icon: iconText()
@@ -24,3 +24,3 @@ }
     return {
-      color: '#1abc9c',
+      color: '#068dbb',
       icon: iconAudio()
@@ -32,3 +32,3 @@ }
     return {
-      color: '#2980b9',
+      color: '#19af67',
       icon: iconVideo()
@@ -40,3 +40,3 @@ }
     return {
-      color: '#e74c3c',
+      color: '#e25149',
       icon: iconPDF()
@@ -43,0 +43,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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276338

increased by2.1%

Lines of code

5599

increased by2.02%

Dependency changes

• + Added@uppy/informer@0.30.5(transitive)

• + Added@uppy/provider-views@0.30.5(transitive)

• + Added@uppy/status-bar@0.30.5(transitive)

• + Added@uppy/thumbnail-generator@0.30.5(transitive)

• - Removed@uppy/informer@0.30.4(transitive)

• - Removed@uppy/provider-views@0.30.4(transitive)

• - Removed@uppy/status-bar@0.30.4(transitive)

• - Removed@uppy/thumbnail-generator@0.30.4(transitive)

• - Removed@uppy/utils@0.30.4(transitive)

• Updated@uppy/informer@0.30.5

• Updated@uppy/provider-views@0.30.5

• Updated@uppy/status-bar@0.30.5

• Updated@uppy/thumbnail-generator@0.30.5

• Updated@uppy/utils@0.30.5