Merge remote-tracking branch 'origin/master' into feat/concurrent-dev-command

Author: AminDhouib

.github/workflows/main.yml

@@ -225,6 +225,13 @@ jobs:
         env:
           # Storybook is started by Playwright's webServer config on port 6007
           TOKEN_ENDPOINT: http://localhost:3000/api/upload
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
+          GOOGLE_APP_ID: ${{ secrets.GOOGLE_APP_ID }}
+          ONEDRIVE_CLIENT_ID: ${{ secrets.ONEDRIVE_CLIENT_ID }}
+          DROPBOX_CLIENT_ID: ${{ secrets.DROPBOX_CLIENT_ID }}
+          DROPBOX_APP_SECRET: ${{ secrets.DROPBOX_APP_SECRET }}
+          DROPBOX_REDIRECT_URI: ${{ secrets.DROPBOX_REDIRECT_URI }}
         run: pnpm run test:e2e --reporter=list
 
       - name: Upload Playwright report

.storybook/main.ts

@@ -113,7 +113,7 @@ const config = {
         GOOGLE_APP_ID: process.env.GOOGLE_APP_ID!,
         ONEDRIVE_CLIENT_ID: process.env.ONEDRIVE_CLIENT_ID!,
         DROPBOX_CLIENT_ID: process.env.DROPBOX_CLIENT_ID!,
-        DROPBOX_REDIRECT_URI: process.env.dropbox_redirect_uri!,
+        DROPBOX_REDIRECT_URI: process.env.DROPBOX_REDIRECT_URI!,
     }),
 }
 

src/frontend/components/AdapterSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useRootContext } from '../context/RootContext'
 import useAdapterSelector from '../hooks/useAdapterSelector'
 import { cn } from '../lib/tailwind'
@@ -15,15 +15,65 @@ export default function AdapterSelector() {
             maxFileSize,
             dark,
             classNames,
-            allowFolderUpload,
+            showSelectFolderButton,
         },
         isAddingMore,
         setIsAddingMore,
         inputRef,
+        setFiles,
     } = useRootContext()
     const { chosenAdapters, handleAdapterClick, handleInputFileChange } =
         useAdapterSelector()
 
+    const handleBrowseFilesClick = useCallback(() => {
+        if (inputRef.current) {
+            inputRef.current.removeAttribute('webkitdirectory')
+            inputRef.current.removeAttribute('directory')
+            inputRef.current.click()
+        }
+    }, [inputRef])
+
+    const handleSelectFolderClick = useCallback(async () => {
+        const anyWindow = window as any
+        if (anyWindow.showDirectoryPicker) {
+            try {
+                const directoryHandle = await anyWindow.showDirectoryPicker()
+                const files: File[] = []
+
+                async function getFiles(dirHandle: any, path = '') {
+                    for await (const entry of dirHandle.values()) {
+                        const newPath = path
+                            ? `${path}/${entry.name}`
+                            : entry.name
+                        if (entry.kind === 'file') {
+                            const file = await entry.getFile()
+                            ;(file as any).webkitRelativePath = newPath
+                            files.push(file)
+                        } else if (entry.kind === 'directory') {
+                            await getFiles(entry, newPath)
+                        }
+                    }
+                }
+                await getFiles(directoryHandle)
+                if (files.length > 0) {
+                    setFiles(files)
+                    if (inputRef.current) {
+                        inputRef.current.value = ''
+                    }
+                }
+            } catch {
+                // User cancelled, do nothing.
+            }
+        } else {
+            // Fallback to existing behavior
+            if (inputRef.current) {
+                inputRef.current.setAttribute('webkitdirectory', 'true')
+                inputRef.current.setAttribute('directory', 'true')
+                inputRef.current.click()
+            }
+        }
+    }, [inputRef, setFiles])
+
     return (
         <div
             className={cn(
@@ -84,10 +134,6 @@ export default function AdapterSelector() {
                 data-testid="upup-file-input"
                 ref={inputRef}
                 multiple={multiple}
-                // Allow selecting folders when enabled (webkitdirectory works in Chromium-based browsers)
-                {...((allowFolderUpload
-                    ? { webkitdirectory: true, directory: true }
-                    : {}) as any)}
                 onChange={handleInputFileChange}
             />
             <div className="upup-flex upup-flex-col upup-items-center upup-gap-1 upup-text-center md:upup-gap-2 md:upup-px-[30px]">
@@ -112,23 +158,38 @@ export default function AdapterSelector() {
                                     dark,
                             },
                         )}
-                        onClick={() => inputRef.current?.click()}
+                        onClick={handleBrowseFilesClick}
                     >
-                        browse
+                        browse files
                     </button>
-                    {allowFolderUpload && (
-                        <span
-                            className={cn(
-                                'upup-text-xs upup-text-[#0B0B0B] md:upup-text-sm',
-                                {
-                                    'upup-text-white dark:upup-text-white':
-                                        dark,
-                                },
-                            )}
-                        >
-                            {' '}
-                            or folder
-                        </span>
+                    {showSelectFolderButton && (
+                        <>
+                            <span
+                                className={cn(
+                                    'upup-text-xs upup-text-[#0B0B0B] md:upup-text-sm',
+                                    {
+                                        'upup-text-white dark:upup-text-white':
+                                            dark,
+                                    },
+                                )}
+                            >
+                                {' '}
+                                or
+                            </span>
+                            <button
+                                type="button"
+                                className={cn(
+                                    'upup-cursor-pointer upup-text-xs upup-font-semibold upup-text-[#0E2ADD] md:upup-text-sm',
+                                    {
+                                        'upup-text-[#59D1F9] dark:upup-text-[#59D1F9]':
+                                            dark,
+                                    },
+                                )}
+                                onClick={handleSelectFolderClick}
+                            >
+                                select a folder
+                            </button>
+                        </>
                     )}
                 </div>
                 <p

src/frontend/context/RootContext.ts

@@ -50,7 +50,7 @@ type ContextProps = Required<
         | 'dark'
         | 'classNames'
         | 'icons'
-        | 'allowFolderUpload'
+        | 'showSelectFolderButton'
     >
 > &
     Pick<UpupUploaderProps, 'maxFileSize'> & {

src/frontend/hooks/useRootProvider.ts

@@ -36,7 +36,7 @@ export default function useRootProvider({
     limit: propLimit = 1,
     isProcessing = false,
     allowPreview = true,
-    allowFolderUpload = true,
+    showSelectFolderButton = false,
     maxFileSize,
     shouldCompress = false,
     uploadAdapters = [UploadAdapter.INTERNAL, UploadAdapter.LINK],
@@ -391,7 +391,7 @@ export default function useRootProvider({
             limit,
             isProcessing,
             allowPreview,
-            allowFolderUpload,
+            showSelectFolderButton,
             multiple,
             icons: {
                 ContainerAddMoreIcon: icons.ContainerAddMoreIcon || TbPlus,

src/shared/types.ts

@@ -122,7 +122,7 @@ export type UpupUploaderProps = {
     tokenEndpoint: string
 
     // Optional Props
-    allowFolderUpload?: boolean
+    showSelectFolderButton?: boolean // Controls the "select a folder" button visibility
     enableAutoCorsConfig?: boolean
     uploadAdapters?: UploadAdapter[]
     driveConfigs?: {

stories/UploaderWithButton.stories.tsx

@@ -36,6 +36,11 @@ const meta = {
                 UploadAdapter.LINK,
             ],
         },
+        showSelectFolderButton: {
+            control: 'boolean',
+            description:
+                'Show "select a folder" button for browsing folders via file explorer',
+        },
     },
     render: (args, context) => {
         const isDarkMode = context.globals.theme !== 'light'
@@ -105,6 +110,7 @@ export const UploaderWithButton: Story = {
                 'accept',
                 'limit',
                 'mini',
+                'showSelectFolderButton',
             ],
         },
     },