Dashboard: Implement `disableLocalFiles` option — disables drag & drop, hides “browse” and “My Device” buttons (#2852)

* implement disableLocalFiles option

* don’t show dashed border if drag-drop is disabled

* Update en_US.js

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -165,6 +165,10 @@ class AddFiles extends Component {
       }
     }
 
+    if (this.props.disableLocalFiles) {
+      titleText = this.props.i18n('importFiles')
+    }
+
     return (
       <div className="uppy-Dashboard-AddFiles-title">
         {titleText}
@@ -196,7 +200,7 @@ class AddFiles extends Component {
     )
   }
 
-  renderAcquirers = (acquirers) => {
+  renderAcquirers = (acquirers, disableLocalFiles) => {
     // Group last two buttons, so we don’t end up with
     // just one button on a new line
     const acquirersWithoutLastTwo = [...acquirers]
@@ -204,7 +208,7 @@ class AddFiles extends Component {
 
     return (
       <div className="uppy-Dashboard-AddFiles-list" role="tablist">
-        {this.renderMyDeviceAcquirer()}
+        {!disableLocalFiles && this.renderMyDeviceAcquirer()}
         {acquirersWithoutLastTwo.map((acquirer) => this.renderAcquirer(acquirer))}
         <span role="presentation" style="white-space: nowrap;">
           {lastTwoAcquirers.map((acquirer) => this.renderAcquirer(acquirer))}
@@ -219,7 +223,7 @@ class AddFiles extends Component {
         {this.renderHiddenInput(false, (ref) => { this.fileInput = ref })}
         {this.renderHiddenInput(true, (ref) => { this.folderInput = ref })}
         {this.renderDropPasteBrowseTagline()}
-        {this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers)}
+        {this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers, this.props.disableLocalFiles)}
         <div className="uppy-Dashboard-AddFiles-info">
           {this.props.note && <div className="uppy-Dashboard-note">{this.props.note}</div>}
           {this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(this.props)}

packages/@uppy/dashboard/src/components/Dashboard.js

@@ -58,7 +58,7 @@ module.exports = function Dashboard (props) {
       className={dashboardClassName}
       data-uppy-theme={props.theme}
       data-uppy-num-acquirers={props.acquirers.length}
-      data-uppy-drag-drop-supported={isDragDropSupported()}
+      data-uppy-drag-drop-supported={!props.disableLocalFiles && isDragDropSupported()}
       aria-hidden={props.inline ? 'false' : props.isHidden}
       aria-disabled={props.disabled}
       aria-label={!props.inline ? props.i18n('dashboardWindowTitle') : props.i18n('dashboardTitle')}

packages/@uppy/dashboard/src/index.js

@@ -71,12 +71,13 @@ module.exports = class Dashboard extends Plugin {
         saveChanges: 'Save changes',
         cancel: 'Cancel',
         myDevice: 'My Device',
-        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:',
+        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',
@@ -148,6 +149,7 @@ module.exports = class Dashboard extends Plugin {
       theme: 'light',
       autoOpenFileEditor: false,
       disabled: false,
+      disableLocalFiles: false,
     }
 
     // merge default options with the ones set by user
@@ -590,7 +592,7 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
-    if (this.opts.disabled) {
+    if (this.opts.disabled || this.opts.disableLocalFiles) {
       return
     }
 
@@ -606,7 +608,7 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
-    if (this.opts.disabled) {
+    if (this.opts.disabled || this.opts.disableLocalFiles) {
       return
     }
 
@@ -621,7 +623,7 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
-    if (this.opts.disabled) {
+    if (this.opts.disabled || this.opts.disableLocalFiles) {
       return
     }
 
@@ -941,6 +943,7 @@ module.exports = class Dashboard extends Plugin {
       acquirers,
       theme,
       disabled: this.opts.disabled,
+      disableLocalFiles: this.opts.disableLocalFiles,
       direction: this.opts.direction,
       activePickerPanel: pluginState.activePickerPanel,
       showFileEditor: pluginState.showFileEditor,

packages/@uppy/locales/src/en_US.js

@@ -40,12 +40,12 @@ en_US.strings = {
   done: 'Done',
   dropHereOr: 'Drop files here or %{browse}',
   dropHint: 'Drop your files here',
-  dropPasteBoth: 'Drop files here, paste, %{browseFiles} or %{browseFolders}',
-  dropPasteFiles: 'Drop files here, paste or %{browseFiles}',
-  dropPasteFolders: 'Drop files here, paste or %{browseFolders}',
-  dropPasteImportBoth: 'Drop files here, paste, %{browseFiles}, %{browseFolders} or import from:',
-  dropPasteImportFiles: 'Drop files here, paste, %{browseFiles} or import from:',
-  dropPasteImportFolders: 'Drop files here, paste, %{browseFolders} or import from:',
+  dropPasteBoth: 'Drop files here, %{browseFiles} or %{browseFolders}',
+  dropPasteFiles: 'Drop files here or %{browseFiles}',
+  dropPasteFolders: 'Drop files here or %{browseFolders}',
+  dropPasteImportBoth: 'Drop files here, %{browseFiles}, %{browseFolders} or import from:',
+  dropPasteImportFiles: 'Drop files here, %{browseFiles} or import from:',
+  dropPasteImportFolders: 'Drop files here, %{browseFolders} or import from:',
   editFile: 'Edit file',
   editing: 'Editing %{file}',
   emptyFolderAdded: 'No files were added from empty folder',
@@ -71,6 +71,7 @@ en_US.strings = {
   },
   generatingThumbnails: 'Generating thumbnails...',
   import: 'Import',
+  importFiles: 'Import files from:',
   importFrom: 'Import from %{name}',
   inferiorSize: 'This file is smaller than the allowed size of %{size}',
   loading: 'Loading...',

website/src/docs/dashboard.md

@@ -466,6 +466,10 @@ userNameInput.addEventListener('change', () => {
 })
 ```
 
+### `disableLocalFiles: false`
+
+Enabling this option will disable drag & drop, hide the “browse” and “My Device” button, allowing only uploads from plugins, such as Webcam, Screen Capture, Google Drive, Instagram.
+
 ## Methods
 
 ### `openModal()`