fix: upload has many field updates (#7894)

## Description

Implements fixes and style changes for the upload field component.

Fixes #7819

![CleanShot 2024-08-27 at 16 22
33](https://github.com/user-attachments/assets/fa27251c-20b8-45ad-9109-55dee2e19e2f)

![CleanShot 2024-08-27 at 16 22
49](https://github.com/user-attachments/assets/de2d24f9-b2f5-4b72-abbe-24a6c56a4c21)


- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [ ] Chore (non-breaking change which does not add functionality)
- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Change to the
[templates](https://github.com/payloadcms/payload/tree/main/templates)
directory (does not affect core functionality)
- [ ] Change to the
[examples](https://github.com/payloadcms/payload/tree/main/examples)
directory (does not affect core functionality)
- [ ] This change requires a documentation update

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

---------

Co-authored-by: Paul Popus <paul@nouance.io>

Author: JarrodMFlesch

packages/next/src/templates/Default/index.tsx

@@ -1,6 +1,6 @@
 import type { MappedComponent, ServerProps, VisibleEntities } from 'payload'
 
-import { AppHeader, EntityVisibilityProvider, NavToggler } from '@payloadcms/ui'
+import { AppHeader, BulkUploadProvider, EntityVisibilityProvider, NavToggler } from '@payloadcms/ui'
 import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'
 import React from 'react'
 
@@ -59,21 +59,23 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
 
   return (
     <EntityVisibilityProvider visibleEntities={visibleEntities}>
-      <div>
-        <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
-          <NavToggler className={`${baseClass}__nav-toggler`}>
-            <NavHamburger />
-          </NavToggler>
-        </div>
-        <Wrapper baseClass={baseClass} className={className}>
-          <RenderComponent mappedComponent={MappedDefaultNav} />
-
-          <div className={`${baseClass}__wrap`}>
-            <AppHeader />
-            {children}
+      <BulkUploadProvider>
+        <div>
+          <div className={`${baseClass}__nav-toggler-wrapper`} id="nav-toggler">
+            <NavToggler className={`${baseClass}__nav-toggler`}>
+              <NavHamburger />
+            </NavToggler>
           </div>
-        </Wrapper>
-      </div>
+          <Wrapper baseClass={baseClass} className={className}>
+            <RenderComponent mappedComponent={MappedDefaultNav} />
+
+            <div className={`${baseClass}__wrap`}>
+              <AppHeader />
+              {children}
+            </div>
+          </Wrapper>
+        </div>
+      </BulkUploadProvider>
     </EntityVisibilityProvider>
   )
 }

packages/next/src/views/List/Default/index.tsx

@@ -4,7 +4,6 @@ import type { ClientCollectionConfig } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import {
-  BulkUploadDrawer,
   Button,
   DeleteMany,
   EditMany,
@@ -14,7 +13,6 @@ import {
   ListSelection,
   Pagination,
   PerPage,
-  PopupList,
   PublishMany,
   RelationshipProvider,
   RenderComponent,
@@ -24,7 +22,7 @@ import {
   Table,
   UnpublishMany,
   ViewDescription,
-  bulkUploadDrawerSlug,
+  useBulkUpload,
   useConfig,
   useEditDepth,
   useListInfo,
@@ -60,6 +58,8 @@ export const DefaultListView: React.FC = () => {
   const { searchParams } = useSearchParams()
   const { openModal } = useModal()
   const { clearRouteCache } = useRouteCache()
+  const { setCollectionSlug, setOnSuccess } = useBulkUpload()
+  const { drawerSlug } = useBulkUpload()
 
   const { getEntityConfig } = useConfig()
 
@@ -106,6 +106,12 @@ export const DefaultListView: React.FC = () => {
     })
   }
 
+  const openBulkUpload = React.useCallback(() => {
+    setCollectionSlug(collectionSlug)
+    openModal(drawerSlug)
+    setOnSuccess(clearRouteCache)
+  }, [clearRouteCache, collectionSlug, drawerSlug, openModal, setCollectionSlug, setOnSuccess])
+
   useEffect(() => {
     if (drawerDepth <= 1) {
       setStepNav([
@@ -116,6 +122,8 @@ export const DefaultListView: React.FC = () => {
     }
   }, [setStepNav, labels, drawerDepth])
 
+  const isBulkUploadEnabled = isUploadCollection && collectionConfig.upload.bulkUpload
+
   return (
     <div className={`${baseClass} ${baseClass}--${collectionSlug}`}>
       <SetViewActions actions={actions} />
@@ -126,23 +134,15 @@ export const DefaultListView: React.FC = () => {
             <ListHeader heading={getTranslation(labels?.plural, i18n)}>
               {hasCreatePermission && (
                 <Button
-                  Link={Link}
-                  SubMenuPopupContent={
-                    isUploadCollection && collectionConfig.upload.bulkUpload ? (
-                      <PopupList.ButtonGroup>
-                        <PopupList.Button onClick={() => openModal(bulkUploadDrawerSlug)}>
-                          {t('upload:bulkUpload')}
-                        </PopupList.Button>
-                      </PopupList.ButtonGroup>
-                    ) : null
-                  }
+                  Link={!isBulkUploadEnabled ? Link : undefined}
                   aria-label={i18n.t('general:createNewLabel', {
                     label: getTranslation(labels?.singular, i18n),
                   })}
                   buttonStyle="pill"
-                  el="link"
+                  el={!isBulkUploadEnabled ? 'link' : 'button'}
+                  onClick={isBulkUploadEnabled ? openBulkUpload : undefined}
                   size="small"
-                  to={newDocumentURL}
+                  to={!isBulkUploadEnabled ? newDocumentURL : undefined}
                 >
                   {i18n.t('general:createNew')}
                 </Button>
@@ -155,12 +155,6 @@ export const DefaultListView: React.FC = () => {
                   <ViewDescription Description={Description} description={description} />
                 </div>
               )}
-              {isUploadCollection && collectionConfig.upload.bulkUpload ? (
-                <BulkUploadDrawer
-                  collectionSlug={collectionSlug}
-                  onSuccess={() => clearRouteCache()}
-                />
-              ) : null}
             </ListHeader>
           )}
           <ListControls collectionConfig={collectionConfig} fields={fields} />

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { FieldType, Options, UploadFieldProps } from '@payloadcms/ui'
+import type { FieldType, Options } from '@payloadcms/ui'
+import type { UploadFieldProps } from 'payload'
 
 import {
   FieldLabel,
@@ -156,6 +157,7 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
               setValue(null)
             }
           }}
+          path={field.path}
           relationTo={relationTo}
           required={required}
           serverURL={serverURL}

packages/ui/src/elements/BulkUpload/AddFilesView/index.scss

@@ -7,9 +7,22 @@
     height: 100%;
     padding: calc(var(--base) * 2) var(--gutter-h);
   }
-
+  
   .dropzone {
     flex-direction: column;
     justify-content: center;
+    display: flex;
+    gap: var(--base);
+    background-color: var(--theme-elevation-50);
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__dragAndDropText {
+    margin: 0;
+    text-transform: lowercase;
+    align-self: center;
   }
 }

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

@@ -3,6 +3,7 @@
 import React from 'react'
 
 import { useTranslation } from '../../../providers/Translation/index.js'
+import { Button } from '../../Button/index.js'
 import { Dropzone } from '../../Dropzone/index.js'
 import { DrawerHeader } from '../Header/index.js'
 import './index.scss'
@@ -16,11 +17,43 @@ type Props = {
 export function AddFilesView({ onCancel, onDrop }: Props) {
   const { t } = useTranslation()
 
+  const inputRef = React.useRef(null)
+
   return (
     <div className={baseClass}>
       <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />
       <div className={`${baseClass}__dropArea`}>
-        <Dropzone multipleFiles onChange={onDrop} />
+        <Dropzone multipleFiles onChange={onDrop}>
+          <Button
+            buttonStyle="pill"
+            iconPosition="left"
+            onClick={() => {
+              if (inputRef.current) {
+                inputRef.current.click()
+              }
+            }}
+            size="small"
+          >
+            {t('upload:selectFile')}
+          </Button>
+          <input
+            aria-hidden="true"
+            className={`${baseClass}__hidden-input`}
+            hidden
+            onChange={(e) => {
+              if (e.target.files && e.target.files.length > 0) {
+                onDrop(e.target.files)
+              }
+            }}
+            ref={inputRef}
+            type="file"
+          />
+
+          <p className={`${baseClass}__dragAndDropText`}>
+            {t('general:or')} {t('upload:dragAndDrop')}
+          </p>
+        </Dropzone>
+        {/* <Dropzone multipleFiles onChange={onDrop} /> */}
       </div>
     </div>
   )

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

@@ -9,7 +9,7 @@ import { useConfig } from '../../../providers/Config/index.js'
 import { DocumentInfoProvider } from '../../../providers/DocumentInfo/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import { ActionsBar } from '../ActionsBar/index.js'
-import { discardBulkUploadModalSlug } from '../DiscardWithoutSaving/index.js'
+import { DiscardWithoutSaving, discardBulkUploadModalSlug } from '../DiscardWithoutSaving/index.js'
 import { EditForm } from '../EditForm/index.js'
 import { FileSidebar } from '../FileSidebar/index.js'
 import { useFormsManager } from '../FormsManager/index.js'
@@ -44,20 +44,24 @@ export function AddingFilesView() {
           onClose={() => openModal(discardBulkUploadModalSlug)}
           title={getTranslation(collection.labels.singular, i18n)}
         />
-        <DocumentInfoProvider
-          collectionSlug={collectionSlug}
-          docPermissions={docPermissions}
-          hasPublishPermission={hasPublishPermission}
-          hasSavePermission={hasSavePermission}
-          id={null}
-          initialData={reduceFieldsToValues(activeForm.formState, true)}
-          initialState={activeForm.formState}
-          key={`${activeIndex}-${forms.length}`}
-        >
-          <ActionsBar />
-          <EditForm submitted={hasSubmitted} />
-        </DocumentInfoProvider>
+        {activeForm ? (
+          <DocumentInfoProvider
+            collectionSlug={collectionSlug}
+            docPermissions={docPermissions}
+            hasPublishPermission={hasPublishPermission}
+            hasSavePermission={hasSavePermission}
+            id={null}
+            initialData={reduceFieldsToValues(activeForm.formState, true)}
+            initialState={activeForm.formState}
+            key={`${activeIndex}-${forms.length}`}
+          >
+            <ActionsBar />
+            <EditForm submitted={hasSubmitted} />
+          </DocumentInfoProvider>
+        ) : null}
       </div>
+
+      <DiscardWithoutSaving />
     </div>
   )
 }

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

@@ -3,19 +3,18 @@
 import { useModal } from '@faceless-ui/modal'
 import React from 'react'
 
-import { useEditDepth } from '../../../providers/EditDepth/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import { Button } from '../../Button/index.js'
 import { FullscreenModal } from '../../FullscreenModal/index.js'
-import { drawerSlug } from '../index.js'
+import { useBulkUpload } from '../index.js'
 
 export const discardBulkUploadModalSlug = 'bulk-upload--discard-without-saving'
 const baseClass = 'leave-without-saving'
 
 export function DiscardWithoutSaving() {
   const { t } = useTranslation()
-  const editDepth = useEditDepth()
   const { closeModal } = useModal()
+  const { drawerSlug } = useBulkUpload()
 
   const onCancel = React.useCallback(() => {
     closeModal(discardBulkUploadModalSlug)
@@ -24,16 +23,10 @@ export function DiscardWithoutSaving() {
   const onConfirm = React.useCallback(() => {
     closeModal(drawerSlug)
     closeModal(discardBulkUploadModalSlug)
-  }, [closeModal])
+  }, [closeModal, drawerSlug])
 
   return (
-    <FullscreenModal
-      className={baseClass}
-      slug={discardBulkUploadModalSlug}
-      style={{
-        zIndex: `calc(100 + ${editDepth || 0} + 1)`,
-      }}
-    >
+    <FullscreenModal className={baseClass} slug={discardBulkUploadModalSlug}>
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__content`}>
           <h1>{t('general:leaveWithoutSaving')}</h1>

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

@@ -9,19 +9,12 @@ const baseClass = 'drawer-close-button'
 
 type Props = {
   readonly onClick: () => void
-  readonly slug: string
 }
-export function DrawerCloseButton({ slug, onClick }: Props) {
+export function DrawerCloseButton({ onClick }: Props) {
   const { t } = useTranslation()
 
   return (
-    <button
-      aria-label={t('general:close')}
-      className={baseClass}
-      id={`close-drawer__${slug}`}
-      onClick={onClick}
-      type="button"
-    >
+    <button aria-label={t('general:close')} className={baseClass} onClick={onClick} type="button">
       <XIcon />
     </button>
   )