@uppy/dashboard - npm Package Compare versions

Comparing version 1.11.0 to 1.12.0

lib/components/AddFiles.js

@@ -23,2 +23,6 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
+    _this.triggerFolderInputClick = function () {
+      _this.folderInput.click();
+    };
+
     _this.onFileInputChange = function (event) {
@@ -36,3 +40,3 @@ _this.props.handleInputChange(event); // We clear the input after a file is selected, because otherwise
 
-    _this.renderHiddenFileInput = function () {
+    _this.renderHiddenInput = function (isFolder, refCallback) {
       return h("input", {
@@ -43,2 +47,3 @@ class: "uppy-Dashboard-input",
         tabindex: -1,
+        webkitdirectory: isFolder,
         type: "file",
@@ -49,5 +54,3 @@ name: "files[]",
         accept: _this.props.allowedFileTypes,
-        ref: function ref(_ref) {
-          _this.fileInput = _ref;
-        }
+        ref: refCallback
       });
@@ -90,16 +93,33 @@ };
 
-    _this.renderDropPasteBrowseTagline = function () {
+    _this.renderBrowseButton = function (text, onClickFn) {
       var numberOfAcquirers = _this.props.acquirers.length;
-      var browse = h("button", {
+      return h("button", {
         type: "button",
         class: "uppy-u-reset uppy-Dashboard-browse",
-        onclick: _this.triggerFileInputClick,
+        onclick: onClickFn,
         "data-uppy-super-focusable": numberOfAcquirers === 0
-      }, _this.props.i18n('browse'));
+      }, text);
+    };
+
+    _this.renderDropPasteBrowseTagline = function () {
+      var numberOfAcquirers = _this.props.acquirers.length;
+
+      var browseFiles = _this.renderBrowseButton(_this.props.i18n('browseFiles'), _this.triggerFileInputClick);
+
+      var browseFolders = _this.renderBrowseButton(_this.props.i18n('browseFolders'), _this.triggerFolderInputClick); // in order to keep the i18n CamelCase and options lower (as are defaults) we will want to transform a lower
+      // to Camel
+
+
+      var lowerFMSelectionType = _this.props.fileManagerSelectionType;
+      var camelFMSelectionType = lowerFMSelectionType.charAt(0).toUpperCase() + lowerFMSelectionType.slice(1);
       return h("div", {
         class: "uppy-Dashboard-AddFiles-title"
-      }, numberOfAcquirers > 0 ? _this.props.i18nArray('dropPasteImport', {
-        browse: browse
-      }) : _this.props.i18nArray('dropPaste', {
-        browse: browse
+      }, numberOfAcquirers > 0 ? _this.props.i18nArray("dropPasteImport" + camelFMSelectionType, {
+        browseFiles: browseFiles,
+        browseFolders: browseFolders,
+        browse: browseFiles
+      }) : _this.props.i18nArray("dropPaste" + camelFMSelectionType, {
+        browseFiles: browseFiles,
+        browseFolders: browseFolders,
+        browse: browseFiles
       }));
@@ -181,5 +201,11 @@ };
   _proto.render = function render() {
+    var _this2 = this;
+
     return h("div", {
       class: "uppy-Dashboard-AddFiles"
-    }, this.renderHiddenFileInput(), this.renderDropPasteBrowseTagline(), this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers), h("div", {
+    }, this.renderHiddenInput(false, function (ref) {
+      _this2.fileInput = ref;
+    }), this.renderHiddenInput(true, function (ref) {
+      _this2.folderInput = ref;
+    }), this.renderDropPasteBrowseTagline(), this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers), h("div", {
       class: "uppy-Dashboard-AddFiles-info"
@@ -186,0 +212,0 @@ }, this.props.note && h("div", {

lib/components/Dashboard.js

@@ -24,3 +24,3 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-var PreactCSSTransitionGroup = require('preact-css-transition-group'); // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
+var PreactCSSTransitionGroup = require('preact8-css-transition-group'); // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
 // https://github.com/ghosh/micromodal
@@ -27,0 +27,0 @@

lib/index.js

@@ -805,2 +805,7 @@ var _class, _temp;
 
+      if (['files', 'folders', 'both'].indexOf(_this.opts.fileManagerSelectionType) < 0) {
+        _this.opts.fileManagerSelectionType = 'files';
+        console.error("Unsupported option for \"fileManagerSelectionType\". Using default of \"" + _this.opts.fileManagerSelectionType + "\".");
+      }
+
       return DashboardUI({
@@ -867,2 +872,3 @@ state: state,
         showLinkToFileUploadResult: _this.opts.showLinkToFileUploadResult,
+        fileManagerSelectionType: _this.opts.fileManagerSelectionType,
         proudlyDisplayPoweredByUppy: _this.opts.proudlyDisplayPoweredByUppy,
@@ -1055,6 +1061,11 @@ hideCancelButton: _this.opts.hideCancelButton,
         myDevice: 'My Device',
-        dropPaste: 'Drop files here, paste or %{browse}',
-        dropPasteImport: 'Drop files here, paste, %{browse} or import from:',
+        dropPasteFiles: 'Drop files here, paste or %{browseFiles}',
+        dropPasteFolders: 'Drop files here, paste or %{browseFolders}',
+        dropPasteBoth: 'Drop files here, paste, %{browseFiles} or %{browseFolders}',
+        dropPasteImportFiles: 'Drop files here, paste, %{browseFiles} or import from:',
+        dropPasteImportFolders: 'Drop files here, paste, %{browseFolders} or import from:',
+        dropPasteImportBoth: 'Drop files here, paste, %{browseFiles}, %{browseFolders} or import from:',
         dropHint: 'Drop your files here',
-        browse: 'browse',
+        browseFiles: 'browse files',
+        browseFolders: 'browse folders',
         uploadComplete: 'Upload complete',
@@ -1113,2 +1124,3 @@ uploadPaused: 'Upload paused',
       animateOpenClose: true,
+      fileManagerSelectionType: 'files',
       proudlyDisplayPoweredByUppy: true,
@@ -1137,2 +1149,2 @@ onRequestCloseModal: function onRequestCloseModal() {
   return Dashboard;
-}(Plugin), _class.VERSION = "1.11.0", _temp);
+}(Plugin), _class.VERSION = "1.12.0", _temp);

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "MIT",
@@ -38,3 +38,3 @@ "main": "lib/index.js",
     "preact": "8.2.9",
-    "preact-css-transition-group": "^1.3.0",
+    "preact8-css-transition-group": "^2.1.0",
     "resize-observer-polyfill": "^1.5.0"
@@ -45,3 +45,3 @@ },
   },
-  "gitHead": "1faeb43228dab45e42d5f0ccc10cd321c774e114"
+  "gitHead": "6151b337004204137893c9fc52bfab139acca652"
 }

src/components/AddFiles.js

@@ -8,2 +8,6 @@ const { h, Component } = require('preact')
 
+  triggerFolderInputClick = () => {
+    this.folderInput.click()
+  }
+
   onFileInputChange = (event) => {
@@ -50,3 +54,3 @@ this.props.handleInputChange(event)
 
-  renderHiddenFileInput = () => {
+  renderHiddenInput = (isFolder, refCallback) => {
     return (
@@ -58,2 +62,3 @@ <input
         tabindex={-1}
+        webkitdirectory={isFolder}
         type="file"
@@ -64,3 +69,3 @@ name="files[]"
         accept={this.props.allowedFileTypes}
-        ref={(ref) => { this.fileInput = ref }}
+        ref={refCallback}
       />
@@ -97,14 +102,26 @@ )
 
-  renderDropPasteBrowseTagline = () => {
+  renderBrowseButton = (text, onClickFn) => {
     const numberOfAcquirers = this.props.acquirers.length
-    const browse =
+    return (
       <button
         type="button"
         class="uppy-u-reset uppy-Dashboard-browse"
-        onclick={this.triggerFileInputClick}
+        onclick={onClickFn}
         data-uppy-super-focusable={numberOfAcquirers === 0}
       >
-        {this.props.i18n('browse')}
+        {text}
       </button>
+    )
+  }
 
+  renderDropPasteBrowseTagline = () => {
+    const numberOfAcquirers = this.props.acquirers.length
+    const browseFiles = this.renderBrowseButton(this.props.i18n('browseFiles'), this.triggerFileInputClick)
+    const browseFolders = this.renderBrowseButton(this.props.i18n('browseFolders'), this.triggerFolderInputClick)
+
+    // in order to keep the i18n CamelCase and options lower (as are defaults) we will want to transform a lower
+    // to Camel
+    const lowerFMSelectionType = this.props.fileManagerSelectionType
+    const camelFMSelectionType = lowerFMSelectionType.charAt(0).toUpperCase() + lowerFMSelectionType.slice(1)
+
     return (
@@ -114,4 +131,4 @@ <div class="uppy-Dashboard-AddFiles-title">
           numberOfAcquirers > 0
-            ? this.props.i18nArray('dropPasteImport', { browse })
-            : this.props.i18nArray('dropPaste', { browse })
+            ? this.props.i18nArray(`dropPasteImport${camelFMSelectionType}`, { browseFiles, browseFolders, browse: browseFiles })
+            : this.props.i18nArray(`dropPaste${camelFMSelectionType}`, { browseFiles, browseFolders, browse: browseFiles })
         }
@@ -166,3 +183,4 @@ </div>
       <div class="uppy-Dashboard-AddFiles">
-        {this.renderHiddenFileInput()}
+        {this.renderHiddenInput(false, (ref) => { this.fileInput = ref })}
+        {this.renderHiddenInput(true, (ref) => { this.folderInput = ref })}
         {this.renderDropPasteBrowseTagline()}
@@ -169,0 +187,0 @@ {this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers)}

src/components/Dashboard.js

@@ -11,3 +11,3 @@ const FileList = require('./FileList')
 const { h } = require('preact')
-const PreactCSSTransitionGroup = require('preact-css-transition-group')
+const PreactCSSTransitionGroup = require('preact8-css-transition-group')
 
@@ -14,0 +14,0 @@ // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog

src/index.js

@@ -71,6 +71,11 @@ const { Plugin } = require('@uppy/core')
         myDevice: 'My Device',
-        dropPaste: 'Drop files here, paste or %{browse}',
-        dropPasteImport: 'Drop files here, paste, %{browse} or import from:',
+        dropPasteFiles: 'Drop files here, paste or %{browseFiles}',
+        dropPasteFolders: 'Drop files here, paste or %{browseFolders}',
+        dropPasteBoth: 'Drop files here, paste, %{browseFiles} or %{browseFolders}',
+        dropPasteImportFiles: 'Drop files here, paste, %{browseFiles} or import from:',
+        dropPasteImportFolders: 'Drop files here, paste, %{browseFolders} or import from:',
+        dropPasteImportBoth: 'Drop files here, paste, %{browseFiles}, %{browseFolders} or import from:',
         dropHint: 'Drop your files here',
-        browse: 'browse',
+        browseFiles: 'browse files',
+        browseFolders: 'browse folders',
         uploadComplete: 'Upload complete',
@@ -130,2 +135,3 @@ uploadPaused: 'Upload paused',
       animateOpenClose: true,
+      fileManagerSelectionType: 'files',
       proudlyDisplayPoweredByUppy: true,
@@ -844,2 +850,7 @@ onRequestCloseModal: () => this.closeModal(),
 
+    if (['files', 'folders', 'both'].indexOf(this.opts.fileManagerSelectionType) < 0) {
+      this.opts.fileManagerSelectionType = 'files'
+      console.error(`Unsupported option for "fileManagerSelectionType". Using default of "${this.opts.fileManagerSelectionType}".`)
+    }
+
     return DashboardUI({
@@ -906,2 +917,3 @@ state,
       showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,
+      fileManagerSelectionType: this.opts.fileManagerSelectionType,
       proudlyDisplayPoweredByUppy: this.opts.proudlyDisplayPoweredByUppy,
@@ -908,0 +920,0 @@ hideCancelButton: this.opts.hideCancelButton,

types/generatedLocale.d.ts

@@ -24,6 +24,11 @@ import Uppy = require('@uppy/core')
   | 'myDevice'
-  | 'dropPaste'
-  | 'dropPasteImport'
+  | 'dropPasteFiles'
+  | 'dropPasteFolders'
+  | 'dropPasteBoth'
+  | 'dropPasteImportFiles'
+  | 'dropPasteImportFolders'
+  | 'dropPasteImportBoth'
   | 'dropHint'
-  | 'browse'
+  | 'browseFiles'
+  | 'browseFolders'
   | 'uploadComplete'
@@ -30,0 +35,0 @@ | 'uploadPaused'

types/index.d.ts

@@ -41,2 +41,3 @@ import Uppy = require('@uppy/core')
     plugins?: string[]
+    fileManagerSelectionType?: 'files' | 'folders' | 'both';
     proudlyDisplayPoweredByUppy?: boolean
@@ -43,0 +44,0 @@ showLinkToFileUploadResult?: boolean

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

367422

increased by1.06%

Lines of code

7506

increased by0.83%

Dependency changes

• + Addedpreact8-css-transition-group@^2.1.0

• + Addedpreact8-css-transition-group@2.1.1(transitive)

• - Removedpreact-css-transition-group@^1.3.0

• - Removedpreact-css-transition-group@1.3.0(transitive)