feat: Add enable_folder_selection prop to Upload component

- Add enable_folder_selection prop to allow explicit folder-only mode
- When enable_folder_selection=True with multiple=True, file picker shows folders only
- When enable_folder_selection=False (default), file picker shows files only
- Both modes support drag-and-drop for files and folders
- This fixes the accept prop issue where webkitdirectory blocked file selection
- Users can now create separate Upload components for files vs folders

This addresses the issue where the accept prop didn't work with the file
chooser button because webkitdirectory was always enabled with multiple=True.
Now folder selection is opt-in via the enable_folder_selection prop.

Author: LeticiaBN

components/dash-core-components/src/components/Upload.react.js

@@ -111,14 +111,21 @@ Upload.propTypes = {
 
     /**
      * Allow dropping multiple files.
-     * When true, also enables folder selection and drag-and-drop,
-     * allowing users to upload entire folders. The folder hierarchy
-     * is preserved in the filenames (e.g., 'folder/subfolder/file.txt').
-     * Note: Folder support is available in Chrome, Edge, and Opera.
-     * Other browsers will fall back to file-only mode.
+     * When true, enables folder drag-and-drop support.
+     * The folder hierarchy is preserved in filenames (e.g., 'folder/subfolder/file.txt').
+     * Note: Folder drag-and-drop is supported in Chrome, Edge, and Opera.
      */
     multiple: PropTypes.bool,
 
+    /**
+     * Enable folder selection in the file picker dialog.
+     * When true with multiple=True, the file picker allows selecting folders instead of files.
+     * Note: When folder selection is enabled, individual files cannot be selected via the button.
+     * Use separate Upload components if you need both file and folder selection options.
+     * Folder selection is supported in Chrome, Edge, and Opera.
+     */
+    enable_folder_selection: PropTypes.bool,
+
     /**
      * HTML class name of the component
      */
@@ -171,6 +178,7 @@ Upload.defaultProps = {
     max_size: -1,
     min_size: 0,
     multiple: false,
+    enable_folder_selection: false,
     style: {},
     style_active: {
         borderStyle: 'solid',

components/dash-core-components/src/fragments/Upload.react.js

@@ -23,24 +23,24 @@ export default class Upload extends Component {
 
         return acceptList.some(acceptItem => {
             const item = acceptItem.trim().toLowerCase();
-            
+
             // Exact MIME type match
             if (item === fileType) {
                 return true;
             }
-            
+
             // Wildcard MIME type (e.g., image/*)
             if (item.endsWith('/*')) {
                 const wildcardSuffixLength = 2;
                 const baseType = item.slice(0, -wildcardSuffixLength);
                 return fileType.startsWith(baseType + '/');
             }
-            
+
             // File extension match (e.g., .jpg)
             if (item.startsWith('.')) {
                 return fileName.endsWith(item);
             }
-            
+
             return false;
         });
     }
@@ -49,30 +49,30 @@ export default class Upload extends Component {
     async traverseFileTree(item, path = '') {
         const {accept} = this.props;
         const files = [];
-        
+
         if (item.isFile) {
-            return new Promise((resolve) => {
-                item.file((file) => {
+            return new Promise(resolve => {
+                item.file(file => {
                     // Check if file matches accept criteria
                     if (!this.fileMatchesAccept(file, accept)) {
                         resolve([]);
                         return;
                     }
-                    
+
                     // Preserve folder structure in file name
                     const relativePath = path + file.name;
                     Object.defineProperty(file, 'name', {
                         writable: true,
-                        value: relativePath
+                        value: relativePath,
                     });
                     resolve([file]);
                 });
             });
         } else if (item.isDirectory) {
             const dirReader = item.createReader();
-            return new Promise((resolve) => {
+            return new Promise(resolve => {
                 const readEntries = () => {
-                    dirReader.readEntries(async (entries) => {
+                    dirReader.readEntries(async entries => {
                         if (entries.length === 0) {
                             resolve(files);
                         } else {
@@ -97,7 +97,7 @@ export default class Upload extends Component {
     // Custom data transfer handler that supports folders
     async getDataTransferItems(event) {
         const {multiple} = this.props;
-        
+
         // If multiple is not enabled, use default behavior (files only)
         if (!multiple) {
             if (event.dataTransfer) {
@@ -112,10 +112,12 @@ export default class Upload extends Component {
         if (event.dataTransfer && event.dataTransfer.items) {
             const items = Array.from(event.dataTransfer.items);
             const files = [];
-            
+
             for (const item of items) {
                 if (item.kind === 'file') {
-                    const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
+                    const entry = item.webkitGetAsEntry
+                        ? item.webkitGetAsEntry()
+                        : null;
                     if (entry) {
                         const entryFiles = await this.traverseFileTree(entry);
                         files.push(...entryFiles);
@@ -130,17 +132,17 @@ export default class Upload extends Component {
             }
             return files;
         }
-        
+
         // Handle file picker (already works with webkitdirectory attribute)
         if (event.target && event.target.files) {
             return Array.from(event.target.files);
         }
-        
+
         // Fallback
         if (event.dataTransfer && event.dataTransfer.files) {
             return Array.from(event.dataTransfer.files);
         }
-        
+
         return [];
     }
 
@@ -189,6 +191,7 @@ export default class Upload extends Component {
             max_size,
             min_size,
             multiple,
+            enable_folder_selection,
             className,
             className_active,
             className_reject,
@@ -203,13 +206,16 @@ export default class Upload extends Component {
         const disabledStyle = className_disabled ? undefined : style_disabled;
         const rejectStyle = className_reject ? undefined : style_reject;
 
-        // For react-dropzone v4.1.2, we need to add webkitdirectory attribute manually
-        // when multiple is enabled to support folder selection
-        const inputProps = multiple ? {
-            webkitdirectory: 'true',
-            directory: 'true',
-            mozdirectory: 'true'
-        } : {};
+        // Enable folder selection in file picker when explicitly requested
+        // Note: This makes individual files unselectable in the file picker
+        const inputProps =
+            multiple && enable_folder_selection
+                ? {
+                      webkitdirectory: 'true',
+                      directory: 'true',
+                      mozdirectory: 'true',
+                  }
+                : {};
 
         return (
             <LoadingElement id={id}>