@payloadcms/ui 3.63.0-internal.dc01f92 → 3.63.0

package/dist/fields/Upload/Input.js

@@ -51,7 +51,7 @@ export function UploadInput(props) {
     value
   } = props;
   const [populatedDocs, setPopulatedDocs] = React.useState();
-  const [activeRelationTo, setActiveRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
+  const [activeRelationTo] = React.useState(Array.isArray(relationTo) ? relationTo[0] : relationTo);
   const {
     openModal
   } = useModal();
@@ -60,7 +60,8 @@ export function UploadInput(props) {
     setCollectionSlug,
     setInitialFiles,
     setMaxFiles,
-    setOnSuccess
+    setOnSuccess,
+    setSelectableCollections
   } = useBulkUpload();
   const {
     permissions
@@ -72,18 +73,57 @@ export function UploadInput(props) {
     i18n,
     t
   } = useTranslation();
+  // This will be used by the bulk upload to allow you to select only collections you have create permissions for
+  const collectionSlugsWithCreatePermission = useMemo(() => {
+    if (Array.isArray(relationTo)) {
+      return relationTo.filter(relation => permissions?.collections && permissions.collections?.[relation]?.create);
+    }
+    return [];
+  }, [relationTo, permissions]);
   const filterOptions = useMemo(() => {
-    return {
-      ...filterOptionsFromProps,
-      [activeRelationTo]: {
-        ...(filterOptionsFromProps?.[activeRelationTo] || {}),
-        id: {
-          ...(filterOptionsFromProps?.[activeRelationTo]?.id || {}),
-          not_in: (filterOptionsFromProps?.[activeRelationTo]?.id?.not_in || []).concat(...(Array.isArray(value) || value ? [value] : []))
+    const isPoly = Array.isArray(relationTo);
+    if (!value) {
+      return filterOptionsFromProps;
+    }
+    // Group existing IDs by relation
+    const existingIdsByRelation = {};
+    const values = Array.isArray(value) ? value : [value];
+    for (const val of values) {
+      if (isPoly && typeof val === 'object' && 'relationTo' in val) {
+        // Poly upload - group by relationTo
+        if (!existingIdsByRelation[val.relationTo]) {
+          existingIdsByRelation[val.relationTo] = [];
+        }
+        existingIdsByRelation[val.relationTo].push(val.value);
+      } else if (!isPoly) {
+        // Non-poly upload - all IDs belong to the single collection
+        const collection = relationTo;
+        if (!existingIdsByRelation[collection]) {
+          existingIdsByRelation[collection] = [];
+        }
+        const id = typeof val === 'object' && 'value' in val ? val.value : val;
+        if (typeof id === 'string' || typeof id === 'number') {
+          existingIdsByRelation[collection].push(id);
         }
       }
+    }
+    // Build filter options for each collection
+    const newFilterOptions = {
+      ...filterOptionsFromProps
     };
-  }, [value, activeRelationTo, filterOptionsFromProps]);
+    const relations = isPoly ? relationTo : [relationTo];
+    relations.forEach(relation_0 => {
+      const existingIds = existingIdsByRelation[relation_0] || [];
+      newFilterOptions[relation_0] = {
+        ...(filterOptionsFromProps?.[relation_0] || {}),
+        id: {
+          ...(filterOptionsFromProps?.[relation_0]?.id || {}),
+          not_in: (filterOptionsFromProps?.[relation_0]?.id?.not_in || []).concat(existingIds)
+        }
+      };
+    });
+    return newFilterOptions;
+  }, [value, filterOptionsFromProps, relationTo]);
   const [ListDrawer,, {
     closeDrawer: closeListDrawer,
     openDrawer: openListDrawer
@@ -98,9 +138,9 @@ export function UploadInput(props) {
     collectionSlug: activeRelationTo
   });
   /**
-  * Prevent initial retrieval of documents from running more than once
+  * Track the last loaded value to prevent unnecessary reloads
   */
-  const loadedValueDocsRef = React.useRef(false);
+  const loadedValueRef = React.useRef(null);
   const canCreate = useMemo(() => {
     if (!allowCreate) {
       return false;
@@ -117,69 +157,113 @@ export function UploadInput(props) {
       onChangeFromProps(newValue);
     }
   }, [onChangeFromProps]);
-  const populateDocs = React.useCallback(async (ids, relatedCollectionSlug) => {
-    if (!ids.length) {
-      return;
+  const populateDocs = React.useCallback(async items => {
+    if (!items?.length) {
+      return [];
     }
-    const query = {
-      depth: 0,
-      draft: true,
-      limit: ids.length,
-      locale: code,
-      where: {
-        and: [{
-          id: {
-            in: ids
-          }
-        }]
+    // 1. Group IDs by collection
+    const grouped = {};
+    items.forEach(({
+      relationTo: relationTo_0,
+      value: value_0
+    }) => {
+      if (!grouped[relationTo_0]) {
+        grouped[relationTo_0] = [];
       }
-    };
-    const response = await fetch(`${serverURL}${api}/${relatedCollectionSlug}`, {
-      body: qs.stringify(query),
-      credentials: 'include',
-      headers: {
-        'Accept-Language': i18n.language,
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'X-Payload-HTTP-Method-Override': 'GET'
-      },
-      method: 'POST'
+      grouped[relationTo_0].push(value_0);
     });
-    if (response.ok) {
-      const json = await response.json();
-      let sortedDocs = ids.map(id => json.docs.find(doc => {
-        return String(doc.id) === String(id);
-      }));
-      if (sortedDocs.includes(undefined) && hasMany) {
-        sortedDocs = sortedDocs.map((doc_0, index) => doc_0 ? doc_0 : {
-          id: ids[index],
-          filename: `${t('general:untitled')} - ID: ${ids[index]}`,
-          isPlaceholder: true
-        });
+    // 2. Fetch per collection
+    const fetches = Object.entries(grouped).map(async ([collection_0, ids]) => {
+      const query = {
+        depth: 0,
+        draft: true,
+        limit: ids.length,
+        locale: code,
+        where: {
+          and: [{
+            id: {
+              in: ids
+            }
+          }]
+        }
+      };
+      const response = await fetch(`${serverURL}${api}/${collection_0}`, {
+        body: qs.stringify(query),
+        credentials: 'include',
+        headers: {
+          'Accept-Language': i18n.language,
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'X-Payload-HTTP-Method-Override': 'GET'
+        },
+        method: 'POST'
+      });
+      let docs = [];
+      if (response.ok) {
+        const data = await response.json();
+        docs = data.docs;
       }
+      // Map docs by ID for fast lookup
+      const docsById = docs.reduce((acc, doc) => {
+        acc[doc.id] = doc;
+        return acc;
+      }, {});
       return {
-        ...json,
-        docs: sortedDocs
+        collection: collection_0,
+        docsById
       };
-    }
-    return null;
-  }, [code, serverURL, api, i18n.language, t, hasMany]);
+    });
+    const results = await Promise.all(fetches);
+    // 3. Build lookup
+    const lookup = {};
+    results.forEach(({
+      collection: collection_1,
+      docsById: docsById_0
+    }) => {
+      lookup[collection_1] = docsById_0;
+    });
+    // 4. Reconstruct in input order, add placeholders if missing
+    const sortedDocs = items.map(({
+      relationTo: relationTo_1,
+      value: value_1
+    }) => {
+      const doc_0 = lookup[relationTo_1]?.[value_1] || {
+        id: value_1,
+        filename: `${t('general:untitled')} - ID: ${value_1}`,
+        isPlaceholder: true
+      };
+      return {
+        relationTo: relationTo_1,
+        value: doc_0
+      };
+    });
+    return sortedDocs;
+  }, [serverURL, api, code, i18n.language, t]);
   const onUploadSuccess = useCallback(uploadedForms => {
+    const isPoly_0 = Array.isArray(relationTo);
     if (hasMany) {
-      const mergedValue = [...(Array.isArray(value) ? value : []), ...uploadedForms.map(form => form.doc.id)];
+      const newValues = uploadedForms.map(form => isPoly_0 ? {
+        relationTo: form.collectionSlug,
+        value: form.doc.id
+      } : form.doc.id);
+      const mergedValue = [...(Array.isArray(value) ? value : []), ...newValues];
       onChange(mergedValue);
       setPopulatedDocs(currentDocs => [...(currentDocs || []), ...uploadedForms.map(form_0 => ({
         relationTo: form_0.collectionSlug,
         value: form_0.doc
       }))]);
     } else {
-      const firstDoc = uploadedForms[0].doc;
-      onChange(firstDoc.id);
+      const firstDoc = uploadedForms[0];
+      const newValue_0 = isPoly_0 ? {
+        relationTo: firstDoc.collectionSlug,
+        value: firstDoc.doc.id
+      } : firstDoc.doc.id;
+      onChange(newValue_0);
       setPopulatedDocs([{
         relationTo: firstDoc.collectionSlug,
-        value: firstDoc
+        value: firstDoc.doc
       }]);
     }
-  }, [value, onChange, hasMany]);
+  }, [value, onChange, hasMany, relationTo]);
   const onLocalFileSelection = React.useCallback(fileList => {
     let fileListToUse = fileList;
     if (!hasMany && fileList && fileList.length > 1) {
@@ -190,126 +274,185 @@ export function UploadInput(props) {
     if (fileListToUse) {
       setInitialFiles(fileListToUse);
     }
-    setCollectionSlug(relationTo);
+    // Use activeRelationTo for poly uploads, or relationTo as string for single collection
+    const collectionToUse = Array.isArray(relationTo) ? activeRelationTo : relationTo;
+    setCollectionSlug(collectionToUse);
+    if (Array.isArray(collectionSlugsWithCreatePermission)) {
+      setSelectableCollections(collectionSlugsWithCreatePermission);
+    }
     if (typeof maxRows === 'number') {
       setMaxFiles(maxRows);
     }
     openModal(drawerSlug);
-  }, [drawerSlug, hasMany, openModal, relationTo, setCollectionSlug, setInitialFiles, maxRows, setMaxFiles]);
+  }, [hasMany, relationTo, activeRelationTo, setCollectionSlug, collectionSlugsWithCreatePermission, maxRows, openModal, drawerSlug, setInitialFiles, setSelectableCollections, setMaxFiles]);
   // only hasMany can bulk select
-  const onListBulkSelect = React.useCallback(async docs => {
+  const onListBulkSelect = React.useCallback(async docs_0 => {
+    const isPoly_1 = Array.isArray(relationTo);
     const selectedDocIDs = [];
-    for (const [id_0, isSelected] of docs) {
+    for (const [id_0, isSelected] of docs_0) {
       if (isSelected) {
         selectedDocIDs.push(id_0);
       }
     }
-    const loadedDocs = await populateDocs(selectedDocIDs, activeRelationTo);
+    const itemsToLoad = selectedDocIDs.map(id_1 => ({
+      relationTo: activeRelationTo,
+      value: id_1
+    }));
+    const loadedDocs = await populateDocs(itemsToLoad);
     if (loadedDocs) {
-      setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs.docs.map(doc_1 => ({
-        relationTo: activeRelationTo,
-        value: doc_1
-      }))]);
+      setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs]);
     }
-    onChange([...(Array.isArray(value) ? value : []), ...selectedDocIDs]);
+    const newValues_0 = selectedDocIDs.map(id_2 => isPoly_1 ? {
+      relationTo: activeRelationTo,
+      value: id_2
+    } : id_2);
+    onChange([...(Array.isArray(value) ? value : []), ...newValues_0]);
     closeListDrawer();
-  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value]);
-  const onDocCreate = React.useCallback(data => {
-    if (data.doc) {
+  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value, relationTo]);
+  const onDocCreate = React.useCallback(data_0 => {
+    const isPoly_2 = Array.isArray(relationTo);
+    if (data_0.doc) {
       setPopulatedDocs(currentDocs_1 => [...(currentDocs_1 || []), {
         relationTo: activeRelationTo,
-        value: data.doc
+        value: data_0.doc
       }]);
-      onChange(data.doc.id);
+      const newValue_1 = isPoly_2 ? {
+        relationTo: activeRelationTo,
+        value: data_0.doc.id
+      } : data_0.doc.id;
+      onChange(newValue_1);
     }
     closeCreateDocDrawer();
-  }, [closeCreateDocDrawer, activeRelationTo, onChange]);
+  }, [closeCreateDocDrawer, activeRelationTo, onChange, relationTo]);
   const onListSelect = useCallback(async ({
     collectionSlug,
-    doc: doc_2
+    doc: doc_1
   }) => {
-    const loadedDocs_0 = await populateDocs([doc_2.id], collectionSlug);
-    const selectedDoc = loadedDocs_0 ? loadedDocs_0.docs?.[0] : null;
+    const isPoly_3 = Array.isArray(relationTo);
+    const loadedDocs_0 = await populateDocs([{
+      relationTo: collectionSlug,
+      value: doc_1.id
+    }]);
+    const selectedDoc = loadedDocs_0?.[0] || null;
     setPopulatedDocs(currentDocs_2 => {
       if (selectedDoc) {
         if (hasMany) {
-          return [...(currentDocs_2 || []), {
-            relationTo: activeRelationTo,
-            value: selectedDoc
-          }];
+          return [...(currentDocs_2 || []), selectedDoc];
         }
-        return [{
-          relationTo: activeRelationTo,
-          value: selectedDoc
-        }];
+        return [selectedDoc];
       }
       return currentDocs_2;
     });
+    const newValue_2 = isPoly_3 ? {
+      relationTo: collectionSlug,
+      value: doc_1.id
+    } : doc_1.id;
     if (hasMany) {
-      onChange([...(Array.isArray(value) ? value : []), doc_2.id]);
+      const valueToUse = [...(Array.isArray(value) ? value : []), newValue_2];
+      onChange(valueToUse);
     } else {
-      onChange(doc_2.id);
+      const valueToUse_0 = isPoly_3 ? {
+        relationTo: collectionSlug,
+        value: doc_1.id
+      } : doc_1.id;
+      onChange(valueToUse_0);
     }
     closeListDrawer();
-  }, [closeListDrawer, hasMany, populateDocs, onChange, value, activeRelationTo]);
+  }, [closeListDrawer, hasMany, populateDocs, onChange, value, relationTo]);
   const reloadDoc = React.useCallback(async (docID, collectionSlug_0) => {
-    const {
-      docs: docs_0
-    } = await populateDocs([docID], collectionSlug_0);
-    if (docs_0[0]) {
+    const docs_1 = await populateDocs([{
+      relationTo: collectionSlug_0,
+      value: docID
+    }]);
+    if (docs_1[0]) {
       let updatedDocsToPropogate = [];
       setPopulatedDocs(currentDocs_3 => {
-        const existingDocIndex = currentDocs_3?.findIndex(doc_3 => {
-          const hasExisting = doc_3.value?.id === docs_0[0].id || doc_3.value?.isPlaceholder;
-          return hasExisting && doc_3.relationTo === collectionSlug_0;
+        const existingDocIndex = currentDocs_3?.findIndex(doc_2 => {
+          const hasExisting = doc_2.value?.id === docs_1[0].value.id || doc_2.value?.isPlaceholder;
+          return hasExisting && doc_2.relationTo === collectionSlug_0;
         });
         if (existingDocIndex > -1) {
           const updatedDocs = [...currentDocs_3];
-          updatedDocs[existingDocIndex] = {
-            relationTo: collectionSlug_0,
-            value: docs_0[0]
-          };
+          updatedDocs[existingDocIndex] = docs_1[0];
           updatedDocsToPropogate = updatedDocs;
           return updatedDocs;
         }
+        return currentDocs_3;
       });
       if (updatedDocsToPropogate.length && hasMany) {
-        onChange(updatedDocsToPropogate.map(doc_4 => doc_4.value?.id));
+        onChange(updatedDocsToPropogate.map(doc_3 => doc_3.value?.id));
       }
     }
   }, [populateDocs, onChange, hasMany]);
   // only hasMany can reorder
-  const onReorder = React.useCallback(newValue_0 => {
-    const newValueIDs = newValue_0.map(({
-      value: value_0
-    }) => value_0.id);
-    onChange(newValueIDs);
-    setPopulatedDocs(newValue_0);
-  }, [onChange]);
-  const onRemove = React.useCallback(newValue_1 => {
-    const newValueIDs_0 = newValue_1 ? newValue_1.map(({
-      value: value_1
-    }) => value_1.id) : null;
-    onChange(hasMany ? newValueIDs_0 : newValueIDs_0 ? newValueIDs_0[0] : null);
-    setPopulatedDocs(newValue_1 ? newValue_1 : []);
-  }, [onChange, hasMany]);
+  const onReorder = React.useCallback(newValue_3 => {
+    const isPoly_4 = Array.isArray(relationTo);
+    const newValueToSave = newValue_3.map(({
+      relationTo: rel,
+      value: value_2
+    }) => isPoly_4 ? {
+      relationTo: rel,
+      value: value_2.id
+    } : value_2.id);
+    onChange(newValueToSave);
+    setPopulatedDocs(newValue_3);
+  }, [onChange, relationTo]);
+  const onRemove = React.useCallback(newValue_4 => {
+    const isPoly_5 = Array.isArray(relationTo);
+    if (!newValue_4 || newValue_4.length === 0) {
+      onChange(hasMany ? [] : null);
+      setPopulatedDocs(hasMany ? [] : null);
+      return;
+    }
+    const newValueToSave_0 = newValue_4.map(({
+      relationTo: rel_0,
+      value: value_3
+    }) => isPoly_5 ? {
+      relationTo: rel_0,
+      value: value_3.id
+    } : value_3.id);
+    onChange(hasMany ? newValueToSave_0 : newValueToSave_0[0]);
+    setPopulatedDocs(newValue_4);
+  }, [onChange, hasMany, relationTo]);
   useEffect(() => {
     async function loadInitialDocs() {
       if (value) {
-        loadedValueDocsRef.current = true;
-        const loadedDocs_1 = await populateDocs(Array.isArray(value) ? value : [value], activeRelationTo);
+        let itemsToLoad_0;
+        if (Array.isArray(relationTo) && (typeof value === 'object' && 'relationTo' in value || Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && 'relationTo' in value[0])) {
+          // For poly uploads, value should already be in the format { relationTo, value }
+          const values_0 = Array.isArray(value) ? value : [value];
+          itemsToLoad_0 = values_0.filter(v => typeof v === 'object' && 'relationTo' in v);
+        } else {
+          // This check is here to satisfy TypeScript that relationTo is a string
+          if (!Array.isArray(relationTo)) {
+            // For single collection uploads, we need to wrap the IDs
+            const ids_0 = Array.isArray(value) ? value : [value];
+            itemsToLoad_0 = ids_0.map(id_3 => {
+              const idValue = typeof id_3 === 'object' && 'value' in id_3 ? id_3.value : id_3;
+              return {
+                relationTo,
+                value: idValue
+              };
+            });
+          }
+        }
+        const loadedDocs_1 = await populateDocs(itemsToLoad_0);
         if (loadedDocs_1) {
-          setPopulatedDocs(loadedDocs_1.docs.map(doc_5 => ({
-            relationTo: activeRelationTo,
-            value: doc_5
-          })));
+          setPopulatedDocs(loadedDocs_1);
+          loadedValueRef.current = value;
         }
+      } else {
+        // Clear populated docs when value is cleared
+        setPopulatedDocs([]);
+        loadedValueRef.current = null;
       }
     }
-    if (!loadedValueDocsRef.current) {
+    // Only load if value has changed from what we last loaded
+    const valueChanged = loadedValueRef.current !== value;
+    if (valueChanged) {
       void loadInitialDocs();
     }
-  }, [populateDocs, activeRelationTo, value]);
+  }, [populateDocs, value, relationTo]);
   useEffect(() => {
     setOnSuccess(onUploadSuccess);
   }, [value, path, onUploadSuccess, setOnSuccess]);
@@ -346,12 +489,13 @@ export function UploadInput(props) {
           onReorder: onReorder,
           readonly: readOnly,
           reloadDoc: reloadDoc,
-          serverURL: serverURL
+          serverURL: serverURL,
+          showCollectionSlug: Array.isArray(relationTo)
         }) : /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__loadingRows`,
-          children: value.map(id_1 => /*#__PURE__*/_jsx(ShimmerEffect, {
+          children: value.map(id_4 => /*#__PURE__*/_jsx(ShimmerEffect, {
             height: "40px"
-          }, id_1))
+          }, typeof id_4 === 'object' ? id_4.value : id_4))
         })
       }) : null, !hasMany && value ? /*#__PURE__*/_jsx(_Fragment, {
         children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? /*#__PURE__*/_jsx(UploadComponentHasOne, {
@@ -360,7 +504,8 @@ export function UploadInput(props) {
           onRemove: onRemove,
           readonly: readOnly,
           reloadDoc: reloadDoc,
-          serverURL: serverURL
+          serverURL: serverURL,
+          showCollectionSlug: Array.isArray(relationTo)
         }) : populatedDocs && value && !populatedDocs?.[0]?.value ? /*#__PURE__*/_jsxs(_Fragment, {
           children: [t('general:untitled'), " - ID: ", value]
         }) : /*#__PURE__*/_jsx(ShimmerEffect, {