diff --git a/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx b/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx index 1af27147563..813e85bf411 100644 --- a/packages/ui/src/elements/BulkUpload/FormsManager/index.tsx +++ b/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, @@ -270,14 +272,35 @@ export function FormsManagerProvider({ children }: FormsManagerProps) { } dispatch({ type: 'ADD_FORMS', - forms: Array.from(files).map((file) => ({ - file, - initialState: initialStateRef.current, - })), + forms: Array.from(files).map((file) => { + const baseState = initialStateRef.current + return { + file, + initialState: + folderID && folderFieldName && baseState?.[folderFieldName] + ? { + ...baseState, + [folderFieldName]: { + ...baseState[folderFieldName], + initialValue: folderID, + value: folderID, + }, + } + : baseState, + } + }), }) toggleLoadingOverlay({ isLoading: false, key: 'addingDocs' }) }, - [initializeSharedFormState, hasInitializedState, toggleLoadingOverlay, activeIndex, forms], + [ + initializeSharedFormState, + hasInitializedState, + toggleLoadingOverlay, + activeIndex, + forms, + folderID, + folderFieldName, + ], ) const addFilesEffectEvent = useEffectEvent(addFiles) @@ -291,10 +314,23 @@ export function FormsManagerProvider({ children }: FormsManagerProps) { dispatch({ type: 'ADD_FORMS', - forms: initialForms.map((form) => ({ - ...form, - initialState: form?.initialState || initialStateRef.current, - })), + forms: initialForms.map((form) => { + const baseState = form?.initialState || initialStateRef.current + return { + ...form, + initialState: + folderID && folderFieldName && baseState?.[folderFieldName] + ? { + ...baseState, + [folderFieldName]: { + ...baseState[folderFieldName], + initialValue: folderID, + value: folderID, + }, + } + : baseState, + } + }), }) toggleLoadingOverlay({ isLoading: false, key: 'addingDocs' }) diff --git a/packages/ui/src/elements/BulkUpload/index.tsx b/packages/ui/src/elements/BulkUpload/index.tsx index 9d284bcbb7d..b933f0824f9 100644 --- a/packages/ui/src/elements/BulkUpload/index.tsx +++ b/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) => void setInitialFiles: (files: FileList) => void setInitialForms: ( forms: ((forms: InitialForms | undefined) => InitialForms | undefined) | InitialForms, @@ -184,6 +188,7 @@ export type BulkUploadContext = { const Context = React.createContext({ collectionSlug: '', drawerSlug: '', + folderID: undefined, initialFiles: undefined, initialForms: [], maxFiles: undefined, @@ -191,6 +196,7 @@ const Context = React.createContext({ 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) const [collection, setCollection] = React.useState() + const [folderID, setFolderID] = React.useState(undefined) const [onSuccessFunction, setOnSuccessFunction] = React.useState() const [onCancelFunction, setOnCancelFunction] = React.useState() const [initialFiles, setInitialFiles] = React.useState(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, diff --git a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx b/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx index dcdfa35e0e1..aade4404570 100644 --- a/packages/ui/src/elements/ListHeader/TitleActions/ListBulkUploadButton.tsx +++ b/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,