fix(ui): preselect folder when bulk uploading from inside a folder (#16030)

### What?

Preselect the current folder when triggering bulk upload from inside a
folder view.

### Why?

When bulk uploading from inside a folder, all files show "No Folder"
instead of the current folder. Users have to manually assign each file
to the folder, which is tedious and easy to miss. See #15647

### How?

- Added `folderID` to `BulkUploadContext` to pass folder state from the
button to the drawer
- In `ListBulkUploadButton`, read `folderID` from `useFolder()` and set
it on the context when opening bulk upload
- In `FormsManager`, inject the `folderID` into each form's initial
state so the folder field is pre-populated

Fixes #15647

---------

Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: aqib-io

packages/ui/src/elements/BulkUpload/FormsManager/index.tsx

@@ -105,6 +105,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
   const {
     routes: { api },
   } = config
+  const folderFieldName = config.folders ? config.folders.fieldName : undefined
   const { code } = useLocale()
   const { i18n, t } = useTranslation()
 
@@ -130,6 +131,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
   const {
     collectionSlug,
     drawerSlug,
+    folderID,
     initialFiles,
     initialForms,
     onSuccess,
@@ -218,13 +220,24 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
           schemaPath: collectionSlug,
           skipValidation: true,
         })
+
+        if (folderFieldName && formStateWithoutFiles?.[folderFieldName]) {
+          formStateWithoutFiles[folderFieldName] = {
+            ...formStateWithoutFiles[folderFieldName],
+            customComponents: {
+              ...formStateWithoutFiles[folderFieldName].customComponents,
+              Field: undefined,
+            },
+          }
+        }
+
         initialStateRef.current = formStateWithoutFiles
         setHasInitializedState(true)
       } catch (_err) {
         // swallow error
       }
     },
-    [getDocumentSlots, collectionSlug, getFormState, docPermissions, code],
+    [getDocumentSlots, collectionSlug, getFormState, docPermissions, code, folderFieldName],
   )
 
   const setActiveIndex: FormsManagerContext['setActiveIndex'] = React.useCallback(
@@ -252,6 +265,23 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
     [forms, activeIndex],
   )
 
+  const applyFolderToState = React.useCallback(
+    (baseState: FormState | null): FormState | null => {
+      if (folderID && folderFieldName && baseState?.[folderFieldName]) {
+        return {
+          ...baseState,
+          [folderFieldName]: {
+            ...baseState[folderFieldName],
+            initialValue: folderID,
+            value: folderID,
+          },
+        }
+      }
+      return baseState
+    },
+    [folderID, folderFieldName],
+  )
+
   const addFiles = React.useCallback(
     async (files: FileList) => {
       if (forms.length) {
@@ -272,12 +302,19 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
         type: 'ADD_FORMS',
         forms: Array.from(files).map((file) => ({
           file,
-          initialState: initialStateRef.current,
+          initialState: applyFolderToState(initialStateRef.current),
         })),
       })
       toggleLoadingOverlay({ isLoading: false, key: 'addingDocs' })
     },
-    [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay, activeIndex, forms],
+    [
+      initializeSharedFormState,
+      hasInitializedState,
+      toggleLoadingOverlay,
+      activeIndex,
+      forms,
+      applyFolderToState,
+    ],
   )
 
   const addFilesEffectEvent = useEffectEvent(addFiles)
@@ -293,7 +330,7 @@ export function FormsManagerProvider({ children }: FormsManagerProps) {
       type: 'ADD_FORMS',
       forms: initialForms.map((form) => ({
         ...form,
-        initialState: form?.initialState || initialStateRef.current,
+        initialState: applyFolderToState(form?.initialState || initialStateRef.current),
       })),
     })
 

packages/ui/src/elements/BulkUpload/index.tsx

@@ -76,6 +76,7 @@ export function BulkUploadDrawer() {
   const {
     drawerSlug,
     onCancel,
+    setFolderID,
     setInitialFiles,
     setInitialForms,
     setOnCancel,
@@ -109,6 +110,7 @@ export function BulkUploadDrawer() {
         }
 
         // Reset everything to defaults
+        setFolderID(undefined)
         setInitialFiles(undefined)
         setInitialForms(undefined)
         setOnCancel(() => () => null)
@@ -140,6 +142,7 @@ export function BulkUploadDrawer() {
 export type BulkUploadContext = {
   collectionSlug: CollectionSlug
   drawerSlug: string
+  folderID?: number | string
   initialFiles: FileList
   /**
    * Like initialFiles, but allows manually providing initial form state or the form ID for each file
@@ -164,6 +167,7 @@ export type BulkUploadContext = {
    */
   selectableCollections?: null | string[]
   setCollectionSlug: (slug: string) => void
+  setFolderID: (folderID: number | string | undefined) => void
   setInitialFiles: (files: FileList) => void
   setInitialForms: (
     forms: ((forms: InitialForms | undefined) => InitialForms | undefined) | InitialForms,
@@ -184,13 +188,15 @@ export type BulkUploadContext = {
 const Context = React.createContext<BulkUploadContext>({
   collectionSlug: '',
   drawerSlug: '',
+  folderID: undefined,
   initialFiles: undefined,
   initialForms: [],
   maxFiles: undefined,
   onCancel: () => null,
   onSuccess: () => null,
   selectableCollections: null,
   setCollectionSlug: () => null,
+  setFolderID: () => null,
   setInitialFiles: () => null,
   setInitialForms: () => null,
   setMaxFiles: () => null,
@@ -209,6 +215,7 @@ export function BulkUploadProvider({
 }) {
   const [selectableCollections, setSelectableCollections] = React.useState<null | string[]>(null)
   const [collection, setCollection] = React.useState<string>()
+  const [folderID, setFolderID] = React.useState<number | string | undefined>(undefined)
   const [onSuccessFunction, setOnSuccessFunction] = React.useState<BulkUploadContext['onSuccess']>()
   const [onCancelFunction, setOnCancelFunction] = React.useState<BulkUploadContext['onCancel']>()
   const [initialFiles, setInitialFiles] = React.useState<FileList>(undefined)
@@ -230,6 +237,7 @@ export function BulkUploadProvider({
       value={{
         collectionSlug: collection,
         drawerSlug,
+        folderID,
         initialFiles,
         initialForms,
         maxFiles,
@@ -245,6 +253,7 @@ export function BulkUploadProvider({
         },
         selectableCollections,
         setCollectionSlug: setCollection,
+        setFolderID,
         setInitialFiles,
         setInitialForms,
         setMaxFiles,

packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation.js'
 import React from 'react'
 
 import { useBulkUpload } from '../../../elements/BulkUpload/index.js'
+import { useFolder } from '../../../providers/Folders/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import { Button } from '../../Button/index.js'
 
@@ -27,7 +28,13 @@ export function ListBulkUploadButton({
    */
   openBulkUpload?: () => void
 }) {
-  const { drawerSlug: bulkUploadDrawerSlug, setCollectionSlug, setOnSuccess } = useBulkUpload()
+  const {
+    drawerSlug: bulkUploadDrawerSlug,
+    setCollectionSlug,
+    setFolderID,
+    setOnSuccess,
+  } = useBulkUpload()
+  const { folderID } = useFolder()
   const { t } = useTranslation()
   const { openModal } = useModal()
   const router = useRouter()
@@ -37,6 +44,7 @@ export function ListBulkUploadButton({
       openBulkUploadFromProps()
     } else {
       setCollectionSlug(collectionSlug)
+      setFolderID(folderID)
       openModal(bulkUploadDrawerSlug)
       setOnSuccess(() => {
         if (typeof onBulkUploadSuccess === 'function') {
@@ -50,8 +58,10 @@ export function ListBulkUploadButton({
     router,
     collectionSlug,
     bulkUploadDrawerSlug,
+    folderID,
     openModal,
     setCollectionSlug,
+    setFolderID,
     setOnSuccess,
     onBulkUploadSuccess,
     openBulkUploadFromProps,

test/folders/e2e.spec.ts

@@ -5,29 +5,29 @@ import * as path from 'path'
 import { formatAdminURL } from 'payload/shared'
 import { fileURLToPath } from 'url'
 
+import { applyBrowseByFolderTypeFilter } from '../__helpers/e2e/folders/applyBrowseByFolderTypeFilter.js'
+import { clickFolderCard } from '../__helpers/e2e/folders/clickFolderCard.js'
+import { createFolder } from '../__helpers/e2e/folders/createFolder.js'
+import { createFolderDoc } from '../__helpers/e2e/folders/createFolderDoc.js'
+import { createFolderFromDoc } from '../__helpers/e2e/folders/createFolderFromDoc.js'
+import { expectNoResultsAndCreateFolderButton } from '../__helpers/e2e/folders/expectNoResultsAndCreateFolderButton.js'
+import { selectFolderAndConfirmMove } from '../__helpers/e2e/folders/selectFolderAndConfirmMove.js'
+import { selectFolderAndConfirmMoveFromList } from '../__helpers/e2e/folders/selectFolderAndConfirmMoveFromList.js'
 import {
   closeAllToasts,
   ensureCompilationIsDone,
   getRoutes,
   initPageConsoleErrorCatch,
   saveDocAndAssert,
 } from '../__helpers/e2e/helpers.js'
-import { AdminUrlUtil } from '../__helpers/shared/adminUrlUtil.js'
 import {
   getSelectInputOptions,
   getSelectInputValue,
   openSelectMenu,
 } from '../__helpers/e2e/selectInput.js'
-import { applyBrowseByFolderTypeFilter } from '../__helpers/e2e/folders/applyBrowseByFolderTypeFilter.js'
-import { clickFolderCard } from '../__helpers/e2e/folders/clickFolderCard.js'
-import { createFolder } from '../__helpers/e2e/folders/createFolder.js'
-import { createFolderDoc } from '../__helpers/e2e/folders/createFolderDoc.js'
-import { createFolderFromDoc } from '../__helpers/e2e/folders/createFolderFromDoc.js'
-import { expectNoResultsAndCreateFolderButton } from '../__helpers/e2e/folders/expectNoResultsAndCreateFolderButton.js'
-import { selectFolderAndConfirmMove } from '../__helpers/e2e/folders/selectFolderAndConfirmMove.js'
-import { selectFolderAndConfirmMoveFromList } from '../__helpers/e2e/folders/selectFolderAndConfirmMoveFromList.js'
-import { initPayloadE2ENoConfig } from '../__helpers/shared/initPayloadE2ENoConfig.js'
+import { AdminUrlUtil } from '../__helpers/shared/adminUrlUtil.js'
 import { reInitializeDB } from '../__helpers/shared/clearAndSeed/reInitializeDB.js'
+import { initPayloadE2ENoConfig } from '../__helpers/shared/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import { omittedFromBrowseBySlug, postSlug } from './shared.js'
 
@@ -395,6 +395,33 @@ test.describe('Folders', () => {
       await expect(testFolderCard).toBeHidden()
       await expect(searchFolderCard).toBeVisible()
     })
+
+    test('should preselect folder when bulk uploading from inside a folder', async () => {
+      const mediaURL = new AdminUrlUtil(serverURL, 'media')
+      await page.goto(mediaURL.byFolder)
+
+      await createFolder({ folderName: 'Bulk Upload Folder', folderType: ['Media'], page })
+      await clickFolderCard({ folderName: 'Bulk Upload Folder', page, doubleClick: true })
+
+      const bulkUploadButton = page.locator('.list-header__title-actions button', {
+        hasText: 'Bulk Upload',
+      })
+      await expect(bulkUploadButton).toBeVisible()
+      await bulkUploadButton.click()
+
+      const bulkUploadDrawer = page.locator('dialog#media-bulk-upload-drawer-slug-1')
+      await expect(bulkUploadDrawer).toBeVisible()
+
+      await bulkUploadDrawer
+        .locator('.dropzone input[type="file"]')
+        .setInputFiles(path.resolve(dirname, '../uploads/image.png'))
+
+      const folderField = bulkUploadDrawer.locator('.render-fields #field-folder')
+      await expect(folderField).toBeVisible()
+      await expect(folderField.locator('.relationship--single-value__text')).toHaveText(
+        'Bulk Upload Folder',
+      )
+    })
   })
 
   test.describe('Collection view actions', () => {
@@ -463,15 +490,7 @@ test.describe('Folders', () => {
 
     test('should create folder from By Folder view', async () => {
       await page.goto(postURL.byFolder)
-      const createButton = page.locator('.create-new-doc-in-folder__button', {
-        hasText: 'Create folder',
-      })
-      await createButton.click()
-      await createFolderDoc({
-        page,
-        folderName: 'New Folder From Collection',
-        folderType: ['Posts'],
-      })
+      await createFolder({ folderName: 'New Folder From Collection', folderType: ['Posts'], page })
     })
   })