feat(ui): v4 upload field

packages/ui/src/elements/Dropzone/index.css

@@ -0,0 +1,36 @@
+@layer payload-default {
+  .dropzone {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--spacer-3) - 2px);
+    background: transparent;
+    border: 1px dashed var(--special-border-translucent);
+    border-radius: var(--radius-medium);
+    height: 100%;
+    width: 100%;
+
+    .btn {
+      margin: 0;
+    }
+
+    &.dragging {
+      border-color: var(--border-success-strong);
+      background: var(--bg-success-tertiary);
+
+      * {
+        pointer-events: none;
+      }
+    }
+
+    @media (max-width: 768px) {
+      display: block;
+      text-align: center;
+    }
+
+    &.dropzoneStyle--none {
+      all: unset;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const handleDragOver = (e: DragEvent) => {
   e.preventDefault()

packages/ui/src/fields/FieldLabel/index.css

@@ -8,7 +8,6 @@
     display: flex;
     color: var(--text-default);
     font-family: var(--text-body-medium-font-family);
-    font-weight: var(--text-body-medium-strong-font-weight);
 
     html:not([dir='RTL']) & {
       margin-right: auto;

packages/ui/src/fields/Upload/HasMany/index.css

@@ -11,21 +11,12 @@
   .upload--has-many__draggable-rows {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-1);
+    gap: var(--spacer-2);
   }
 
   .upload--has-many__dragItem {
     .icon--drag-handle {
       color: var(--text-tertiary);
     }
-
-    .thumbnail {
-      width: 26px;
-      height: 26px;
-    }
-
-    .uploadDocRelationshipContent__details {
-      line-height: 1.2;
-    }
   }
 }

packages/ui/src/fields/Upload/HasMany/index.tsx

@@ -126,8 +126,8 @@ export function UploadComponentHasMany(props: Props) {
                     zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,
                   }}
                 >
-                  <UploadCard size="small">
-                    {draggableSortableItemProps && (
+                  <UploadCard readOnly={readonly} size="small">
+                    {draggableSortableItemProps && isSortable && (
                       <div
                         className={`${baseClass}__drag`}
                         {...draggableSortableItemProps.attributes}

packages/ui/src/fields/Upload/HasOne/index.tsx

@@ -70,7 +70,7 @@ export function UploadComponentHasOne(props: Props) {
   }
 
   return (
-    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>
+    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')} readOnly={readonly}>
       <RelationshipContent
         allowEdit={!readonly}
         allowRemove={!readonly}

packages/ui/src/fields/Upload/Input.tsx

@@ -664,126 +664,126 @@ export function UploadInput(props: UploadInputProps) {
           <FieldLabel label={label} localized={localized} path={path} required={required} />
         }
       />
-      <div className={`${baseClass}__wrap`}>
+      {BeforeInput}
+      <div className={`${fieldBaseClass}__wrap`}>
         <RenderCustomComponent
           CustomComponent={Error}
           Fallback={<FieldError path={path} showError={showError} />}
         />
-      </div>
-      {BeforeInput}
-      <div className={`${baseClass}__dropzoneAndUpload`}>
-        {hasMany && Array.isArray(value) && value.length > 0 ? (
-          <>
-            {populatedDocs && populatedDocs?.length > 0 ? (
-              <UploadComponentHasMany
-                displayPreview={displayPreview}
-                fileDocs={populatedDocs}
-                isSortable={isSortable && !readOnly}
-                onRemove={onRemove}
-                onReorder={onReorder}
-                readonly={readOnly}
-                reloadDoc={reloadDoc}
-                serverURL={serverURL}
-                showCollectionSlug={Array.isArray(relationTo)}
-              />
-            ) : (
-              <div className={`${baseClass}__loadingRows`}>
-                {value.map((id) => (
-                  <ShimmerEffect height="40px" key={typeof id === 'object' ? id.value : id} />
-                ))}
-              </div>
-            )}
-          </>
-        ) : null}
-        {!hasMany && value ? (
-          <>
-            {populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? (
-              <UploadComponentHasOne
-                displayPreview={displayPreview}
-                fileDoc={populatedDocs[0]}
-                onRemove={onRemove}
-                readonly={readOnly}
-                reloadDoc={reloadDoc}
-                serverURL={serverURL}
-                showCollectionSlug={Array.isArray(relationTo)}
-              />
-            ) : populatedDocs && value && !populatedDocs?.[0]?.value ? (
-              <>
-                {t('general:untitled')} - ID: {value}
-              </>
-            ) : (
-              <ShimmerEffect height="62px" />
-            )}
-          </>
-        ) : null}
-        {showDropzone ? (
-          <Dropzone
-            disabled={readOnly || !canCreate}
-            multipleFiles={hasMany}
-            onChange={onLocalFileSelection}
-          >
-            <div className={`${baseClass}__dropzoneContent`}>
-              <div className={`${baseClass}__dropzoneContent__buttons`}>
-                {canCreate && (
-                  <>
-                    <Button
-                      buttonStyle="pill"
-                      className={`${baseClass}__createNewToggler`}
-                      disabled={readOnly || !canCreate}
-                      onClick={() => {
-                        if (!readOnly) {
-                          if (hasMany) {
-                            onLocalFileSelection()
-                          } else {
-                            openCreateDocDrawer()
+        <div className={`${baseClass}__dropzoneAndUpload`}>
+          {hasMany && Array.isArray(value) && value.length > 0 ? (
+            <>
+              {populatedDocs && populatedDocs?.length > 0 ? (
+                <UploadComponentHasMany
+                  displayPreview={displayPreview}
+                  fileDocs={populatedDocs}
+                  isSortable={isSortable && !readOnly}
+                  onRemove={onRemove}
+                  onReorder={onReorder}
+                  readonly={readOnly}
+                  reloadDoc={reloadDoc}
+                  serverURL={serverURL}
+                  showCollectionSlug={Array.isArray(relationTo)}
+                />
+              ) : (
+                <div className={`${baseClass}__loadingRows`}>
+                  {value.map((id) => (
+                    <ShimmerEffect height="40px" key={typeof id === 'object' ? id.value : id} />
+                  ))}
+                </div>
+              )}
+            </>
+          ) : null}
+          {!hasMany && value ? (
+            <>
+              {populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? (
+                <UploadComponentHasOne
+                  displayPreview={displayPreview}
+                  fileDoc={populatedDocs[0]}
+                  onRemove={onRemove}
+                  readonly={readOnly}
+                  reloadDoc={reloadDoc}
+                  serverURL={serverURL}
+                  showCollectionSlug={Array.isArray(relationTo)}
+                />
+              ) : populatedDocs && value && !populatedDocs?.[0]?.value ? (
+                <>
+                  {t('general:untitled')} - ID: {value}
+                </>
+              ) : (
+                <ShimmerEffect height="62px" />
+              )}
+            </>
+          ) : null}
+          {showDropzone ? (
+            <Dropzone
+              disabled={readOnly || !canCreate}
+              multipleFiles={hasMany}
+              onChange={onLocalFileSelection}
+            >
+              <div className={`${baseClass}__dropzoneContent`}>
+                <div className={`${baseClass}__dropzoneContent__buttons`}>
+                  {canCreate && (
+                    <>
+                      <Button
+                        buttonStyle="secondary"
+                        className={`${baseClass}__createNewToggler`}
+                        disabled={readOnly || !canCreate}
+                        onClick={() => {
+                          if (!readOnly) {
+                            if (hasMany) {
+                              onLocalFileSelection()
+                            } else {
+                              openCreateDocDrawer()
+                            }
                           }
-                        }
-                      }}
-                      size="medium"
-                    >
-                      {t('general:createNew')}
-                    </Button>
-                    <span className={`${baseClass}__dropzoneContent__orText`}>
-                      {t('general:or')}
-                    </span>
-                  </>
+                        }}
+                        size="medium"
+                      >
+                        {t('general:createNew')}
+                      </Button>
+                      <span className={`${baseClass}__dropzoneContent__orText`}>
+                        {t('general:or')}
+                      </span>
+                    </>
+                  )}
+                  <Button
+                    buttonStyle="secondary"
+                    className={`${baseClass}__listToggler`}
+                    disabled={readOnly}
+                    onClick={openListDrawer}
+                    size="medium"
+                  >
+                    {t('fields:chooseFromExisting')}
+                  </Button>
+                  <CreateDocDrawer onSave={onDocCreate} />
+                  <ListDrawer
+                    allowCreate={canCreate}
+                    enableRowSelections={hasMany}
+                    onBulkSelect={onListBulkSelect}
+                    onSelect={onListSelect}
+                  />
+                </div>
+
+                {canCreate && !readOnly && (
+                  <p className={`${baseClass}__dragAndDropText`}>
+                    {t('general:or')} {t('upload:dragAndDrop')}
+                  </p>
                 )}
-                <Button
-                  buttonStyle="pill"
-                  className={`${baseClass}__listToggler`}
-                  disabled={readOnly}
-                  onClick={openListDrawer}
-                  size="medium"
-                >
-                  {t('fields:chooseFromExisting')}
-                </Button>
-                <CreateDocDrawer onSave={onDocCreate} />
-                <ListDrawer
-                  allowCreate={canCreate}
-                  enableRowSelections={hasMany}
-                  onBulkSelect={onListBulkSelect}
-                  onSelect={onListSelect}
-                />
               </div>
-
-              {canCreate && !readOnly && (
-                <p className={`${baseClass}__dragAndDropText`}>
-                  {t('general:or')} {t('upload:dragAndDrop')}
-                </p>
-              )}
-            </div>
-          </Dropzone>
-        ) : (
-          <>
-            {!readOnly &&
-            !populatedDocs &&
-            (!value ||
-              typeof maxRows !== 'number' ||
-              (Array.isArray(value) && value.length < maxRows)) ? (
-              <ShimmerEffect height="40px" />
-            ) : null}
-          </>
-        )}
+            </Dropzone>
+          ) : (
+            <>
+              {!readOnly &&
+              !populatedDocs &&
+              (!value ||
+                typeof maxRows !== 'number' ||
+                (Array.isArray(value) && value.length < maxRows)) ? (
+                <ShimmerEffect height="40px" />
+              ) : null}
+            </>
+          )}
+        </div>
       </div>
       {AfterInput}
       <RenderCustomComponent