diff --git a/packages/payload/src/admin/types.ts b/packages/payload/src/admin/types.ts
index 4be43d28bb9..05c27971c20 100644
--- a/packages/payload/src/admin/types.ts
+++ b/packages/payload/src/admin/types.ts
@@ -585,6 +585,7 @@ export type DocumentSlots = {
   UnpublishButton?: React.ReactNode
   Upload?: React.ReactNode
   UploadControls?: React.ReactNode
+  UploadFilePreview?: React.ReactNode
 }
 
 export type {
diff --git a/packages/payload/src/bin/generateImportMap/iterateCollections.ts b/packages/payload/src/bin/generateImportMap/iterateCollections.ts
index b9722cd373e..53c40531618 100644
--- a/packages/payload/src/bin/generateImportMap/iterateCollections.ts
+++ b/packages/payload/src/bin/generateImportMap/iterateCollections.ts
@@ -1,6 +1,6 @@
 import type { AdminViewConfig } from '../../admin/views/index.js'
 import type { SanitizedCollectionConfig } from '../../collections/config/types.js'
-import type { SanitizedConfig } from '../../config/types.js'
+import type { PayloadComponent, SanitizedConfig } from '../../config/types.js'
 import type { AddToImportMap, Imports, InternalImportMap } from './index.js'
 
 import { genImportMapIterateFields } from './iterateFields.js'
@@ -52,6 +52,20 @@ export function iterateCollections({
       addToImportMap(collection.upload?.admin?.components?.controls)
     }
 
+    const filePreview = collection.upload?.admin?.components?.filePreview
+    if (filePreview) {
+      if (
+        typeof filePreview === 'string' ||
+        (typeof filePreview === 'object' && 'path' in filePreview)
+      ) {
+        addToImportMap(filePreview as PayloadComponent)
+      } else {
+        for (const component of Object.values(filePreview as Record<string, PayloadComponent>)) {
+          addToImportMap(component)
+        }
+      }
+    }
+
     if (collection.admin?.components?.views?.edit) {
       for (const editViewConfig of Object.values(collection.admin?.components?.views?.edit)) {
         if ('Component' in editViewConfig) {
diff --git a/packages/payload/src/collections/config/client.ts b/packages/payload/src/collections/config/client.ts
index 260b780fa3f..a7a5698ac89 100644
--- a/packages/payload/src/collections/config/client.ts
+++ b/packages/payload/src/collections/config/client.ts
@@ -36,6 +36,7 @@ export type ServerOnlyCollectionAdminProperties = keyof Pick<
 
 export type ServerOnlyUploadProperties = keyof Pick<
   SanitizedCollectionConfig['upload'],
+  | 'admin'
   | 'adminThumbnail'
   | 'externalFileHeaderFilter'
   | 'handlers'
@@ -90,6 +91,7 @@ const serverOnlyCollectionProperties: Partial<ServerOnlyCollectionProperties>[]
 ]
 
 const serverOnlyUploadProperties: Partial<ServerOnlyUploadProperties>[] = [
+  'admin',
   'adminThumbnail',
   'externalFileHeaderFilter',
   'handlers',
diff --git a/packages/payload/src/exports/shared.ts b/packages/payload/src/exports/shared.ts
index b91365249ac..4380ddcdd7a 100644
--- a/packages/payload/src/exports/shared.ts
+++ b/packages/payload/src/exports/shared.ts
@@ -66,6 +66,7 @@ export { validOperators, validOperatorSet } from '../types/constants.js'
 
 export { formatFilesize } from '../uploads/formatFilesize.js'
 export { isImage } from '../uploads/isImage.js'
+export { matchMimeType } from '../uploads/matchMimeType.js'
 export { appendDateTimezoneSelectFields } from '../utilities/appendDateTimezoneSelectFields.js'
 export { appendUploadSelectFields } from '../utilities/appendUploadSelectFields.js'
 export { applyLocaleFiltering } from '../utilities/applyLocaleFiltering.js'
diff --git a/packages/payload/src/uploads/matchMimeType.ts b/packages/payload/src/uploads/matchMimeType.ts
new file mode 100644
index 00000000000..77e69ab9505
--- /dev/null
+++ b/packages/payload/src/uploads/matchMimeType.ts
@@ -0,0 +1,20 @@
+import type { PayloadComponent } from '../config/types.js'
+
+/**
+ * Resolves a PayloadComponent from a MIME-type keyed map.
+ *
+ * Priority: exact match → category wildcard (e.g. `video/*`) → universal fallback (`*`).
+ */
+export function matchMimeType(
+  map: Record<string, PayloadComponent>,
+  mimeType: string,
+): PayloadComponent | undefined {
+  if (map[mimeType]) {
+    return map[mimeType]
+  }
+  const category = mimeType.split('/')[0]
+  if (map[`${category}/*`]) {
+    return map[`${category}/*`]
+  }
+  return map['*']
+}
diff --git a/packages/payload/src/uploads/types.ts b/packages/payload/src/uploads/types.ts
index 3fe5e79bc33..fd6806cde0a 100644
--- a/packages/payload/src/uploads/types.ts
+++ b/packages/payload/src/uploads/types.ts
@@ -116,12 +116,35 @@ export type FileAllowList = Array<{
   mimeType: string
 }>
 
+export type UploadFilePreviewClientProps = {
+  filename: string
+  filesize: number
+  /** Resolved URL of the file (data.url). */
+  fileSrc: string
+  height?: number
+  mimeType: string
+  width?: number
+}
+
+type UploadFilePreviewMap = {
+  [mimeTypePattern: string]: PayloadComponent
+}
+
 type Admin = {
   components?: {
     /**
      * The Controls component to extend the upload controls in the admin panel.
      */
     controls?: PayloadComponent[]
+    /**
+     * A custom component to render in place of the default Thumbnail in the upload side panel.
+     *
+     * Can be a single PayloadComponent (renders for all MIME types) or a Record keyed by
+     * MIME type patterns. Pattern resolution priority: exact match → category wildcard
+     * (e.g. `video/*`) → universal fallback (`*`). Falls back to the default Thumbnail
+     * when nothing matches.
+     */
+    filePreview?: PayloadComponent | UploadFilePreviewMap
   }
 }
 
diff --git a/packages/translations/src/clientKeys.ts b/packages/translations/src/clientKeys.ts
index c4f90e84857..d3a217efe3f 100644
--- a/packages/translations/src/clientKeys.ts
+++ b/packages/translations/src/clientKeys.ts
@@ -336,6 +336,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:only',
   'general:or',
   'general:order',
+  'general:original',
   'general:overwriteExistingData',
   'general:pageNotFound',
   'general:password',
@@ -468,7 +469,11 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'upload:focalPoint',
   'upload:focalPointDescription',
   'upload:height',
+  'upload:fromURL',
+  'upload:linkToFile',
   'upload:pasteURL',
+  'upload:renameFile',
+  'upload:replaceFile',
   'upload:previewSizes',
   'upload:selectCollectionToBrowse',
   'upload:selectFile',
diff --git a/packages/translations/src/languages/ar.ts b/packages/translations/src/languages/ar.ts
index 5a9eab0c068..e12df359d2f 100644
--- a/packages/translations/src/languages/ar.ts
+++ b/packages/translations/src/languages/ar.ts
@@ -400,6 +400,7 @@ export const arTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'فتح في نافذة جديدة',
     or: 'أو',
     order: 'التّرتيب',
+    original: 'أصلي',
     overwriteExistingData: 'استبدل بيانات الحقل الموجودة',
     pageNotFound: 'الصّفحة غير موجودة',
     password: 'كلمة المرور',
@@ -549,12 +550,16 @@ export const arTranslations: DefaultTranslationsObject = {
     fileToUpload: 'ملف للتحميل',
     focalPoint: 'نقطة التركيز',
     focalPointDescription: 'اسحب النقطة المركزية مباشرة على المعاينة أو قم بضبط القيم أدناه.',
+    fromURL: 'تحميل ملف من عنوان URL',
     height: 'الطّول',
     lessInfo: 'معلومات أقلّ',
+    linkToFile: 'رابط إلى الملف',
     moreInfo: 'معلومات أكثر',
     noFile: 'لا يوجد ملف',
     pasteURL: 'لصق الرابط',
     previewSizes: 'أحجام المعاينة',
+    renameFile: 'إعادة تسمية الملف',
+    replaceFile: 'استبدل الملف',
     selectCollectionToBrowse: 'حدّد مجموعة لاستعراضها',
     selectFile: 'اختر ملفّ',
     setCropArea: 'حدد منطقة القص',
diff --git a/packages/translations/src/languages/az.ts b/packages/translations/src/languages/az.ts
index 3216402103a..9619d6a168c 100644
--- a/packages/translations/src/languages/az.ts
+++ b/packages/translations/src/languages/az.ts
@@ -413,6 +413,7 @@ export const azTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Yeni pəncərədə aç',
     or: 'Və ya',
     order: 'Sıra',
+    original: 'Orijinal',
     overwriteExistingData: 'Mövcud sahə məlumatlarını yenidən yazın',
     pageNotFound: 'Səhifə tapılmadı',
     password: 'Şifrə',
@@ -565,12 +566,16 @@ export const azTranslations: DefaultTranslationsObject = {
     focalPoint: 'Mərkəzi Nöqtə',
     focalPointDescription:
       'Fokus nöqtəsini birbaşa önizləməyə sürükləyin və ya aşağıdakı dəyərləri düzəltin.',
+    fromURL: 'URL-dən fayl yüklə',
     height: 'Hündürlük',
     lessInfo: 'Daha az məlumat',
+    linkToFile: 'Fayla keçid',
     moreInfo: 'Daha çox məlumat',
     noFile: 'Heç bir fayl',
     pasteURL: 'URL yapışdır',
     previewSizes: 'Öncədən baxış ölçüləri',
+    renameFile: 'Fayl adını dəyişdirin',
+    replaceFile: 'Faylı əvəz et',
     selectCollectionToBrowse: 'Gözdən keçirmək üçün bir Kolleksiya seçin',
     selectFile: 'Fayl seçin',
     setCropArea: 'Məhsul sahəsini təyin et',
diff --git a/packages/translations/src/languages/bg.ts b/packages/translations/src/languages/bg.ts
index 149443a87ff..913dece6d33 100644
--- a/packages/translations/src/languages/bg.ts
+++ b/packages/translations/src/languages/bg.ts
@@ -409,6 +409,7 @@ export const bgTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Отвори в нов прозорец',
     or: 'Или',
     order: 'Ред',
+    original: 'Оригинал',
     overwriteExistingData: 'Презапишете съществуващите данни в полето',
     pageNotFound: 'Страницата не беше открита',
     password: 'Парола',
@@ -559,12 +560,16 @@ export const bgTranslations: DefaultTranslationsObject = {
     focalPoint: 'Фокусна точка',
     focalPointDescription:
       'Премести фокусната точка директно върху визуализацията или регулирай стойностите по-долу.',
+    fromURL: 'Качване на файл от URL адрес',
     height: 'Височина',
     lessInfo: 'По-малко информация',
+    linkToFile: 'Връзка към файл',
     moreInfo: 'Повече информация',
     noFile: 'Няма файл',
     pasteURL: 'Поставяне на URL',
     previewSizes: 'Преглед на размери',
+    renameFile: 'Преименувайте файл',
+    replaceFile: 'Заменете файл',
     selectCollectionToBrowse: 'Избери колекция, която да разгледаш',
     selectFile: 'Избери файл',
     setCropArea: 'Задай област за изрязване',
diff --git a/packages/translations/src/languages/bnBd.ts b/packages/translations/src/languages/bnBd.ts
index 10098d99807..db5f660e3cb 100644
--- a/packages/translations/src/languages/bnBd.ts
+++ b/packages/translations/src/languages/bnBd.ts
@@ -415,6 +415,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'নতুন উইন্ডোতে খুলুন',
     or: 'বা',
     order: 'অর্ডার',
+    original: 'মূল',
     overwriteExistingData: 'বিদ্যমান ফিল্ড ডেটা ওভাররাইট করুন',
     pageNotFound: 'পৃষ্ঠা পাওয়া যায়নি',
     password: 'পাসওয়ার্ড',
@@ -567,12 +568,16 @@ export const bnBdTranslations: DefaultTranslationsObject = {
     fileToUpload: 'আপলোড করার ফাইল',
     focalPoint: 'ফোকাল পয়েন্ট',
     focalPointDescription: 'প্রিভিউতে সরাসরি ফোকাল পয়েন্ট টানুন বা নিচের মানগুলি সামঞ্জস্য করুন।',
+    fromURL: 'URL থেকে ফাইল আপলোড করুন',
     height: 'উচ্চতা',
     lessInfo: 'কম তথ্য',
+    linkToFile: 'ফাইলের লিঙ্ক',
     moreInfo: 'আরও তথ্য',
     noFile: 'কোনো ফাইল নেই',
     pasteURL: 'URL পেস্ট করুন',
     previewSizes: 'প্রিভিউ আকারগুলি',
+    renameFile: 'ফাইলের নাম পরিবর্তন করুন',
+    replaceFile: 'ফাইল পরিবর্তন করুন',
     selectCollectionToBrowse: 'ব্রাউজ করার জন্য একটি সংগ্রহ নির্বাচন করুন',
     selectFile: 'একটি ফাইল নির্বাচন করুন',
     setCropArea: 'ক্রপ অঞ্চল সেট করুন',
diff --git a/packages/translations/src/languages/bnIn.ts b/packages/translations/src/languages/bnIn.ts
index 3c059775f69..ffa268eaed1 100644
--- a/packages/translations/src/languages/bnIn.ts
+++ b/packages/translations/src/languages/bnIn.ts
@@ -414,6 +414,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'নতুন উইন্ডোতে খুলুন',
     or: 'বা',
     order: 'অর্ডার',
+    original: 'মূল',
     overwriteExistingData: 'বিদ্যমান ফিল্ড ডেটা ওভাররাইট করুন',
     pageNotFound: 'পৃষ্ঠা পাওয়া যায়নি',
     password: 'পাসওয়ার্ড',
@@ -566,12 +567,16 @@ export const bnInTranslations: DefaultTranslationsObject = {
     fileToUpload: 'আপলোড করার ফাইল',
     focalPoint: 'ফোকাল পয়েন্ট',
     focalPointDescription: 'প্রিভিউতে সরাসরি ফোকাল পয়েন্ট টানুন বা নিচের মানগুলি সামঞ্জস্য করুন।',
+    fromURL: 'URL থেকে ফাইল আপলোড করুন',
     height: 'উচ্চতা',
     lessInfo: 'কম তথ্য',
+    linkToFile: 'ফাইলের লিঙ্ক',
     moreInfo: 'আরও তথ্য',
     noFile: 'কোনো ফাইল নেই',
     pasteURL: 'URL পেস্ট করুন',
     previewSizes: 'প্রিভিউ আকারগুলি',
+    renameFile: 'ফাইলের নাম পরিবর্তন করুন',
+    replaceFile: 'ফাইল প্রতিস্থাপন করুন',
     selectCollectionToBrowse: 'ব্রাউজ করার জন্য একটি সংগ্রহ নির্বাচন করুন',
     selectFile: 'একটি ফাইল নির্বাচন করুন',
     setCropArea: 'ক্রপ অঞ্চল সেট করুন',
diff --git a/packages/translations/src/languages/ca.ts b/packages/translations/src/languages/ca.ts
index c9eb0f04cdc..e3aa1c1262b 100644
--- a/packages/translations/src/languages/ca.ts
+++ b/packages/translations/src/languages/ca.ts
@@ -412,6 +412,7 @@ export const caTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Obre en una finestra nova',
     or: 'O',
     order: 'Ordre',
+    original: 'Document original',
     overwriteExistingData: 'Sobreescriu les dades existents',
     pageNotFound: 'Pàgina no trobada',
     password: 'Contrasenya',
@@ -563,12 +564,16 @@ export const caTranslations: DefaultTranslationsObject = {
     focalPoint: 'Punt focal',
     focalPointDescription:
       'Arrossega el punt focal directament sobre la vista prèvia o ajusta els valors a continuació.',
+    fromURL: 'Pujar fitxer des d’una URL',
     height: 'Alçada',
     lessInfo: 'Menys informació',
+    linkToFile: "Enllaç a l'arxiu",
     moreInfo: 'Més informació',
     noFile: 'No hi ha cap fitxer',
     pasteURL: "Enganxa l'URL",
     previewSizes: 'Mides de la vista prèvia',
+    renameFile: 'Canviar el nom del fitxer',
+    replaceFile: 'Reemplaça fitxer',
     selectCollectionToBrowse: 'Selecciona una col·lecció per explorar',
     selectFile: 'Selecciona un fitxer',
     setCropArea: "Estableix l'àrea de retall",
diff --git a/packages/translations/src/languages/cs.ts b/packages/translations/src/languages/cs.ts
index 61133929eee..636ff28c41a 100644
--- a/packages/translations/src/languages/cs.ts
+++ b/packages/translations/src/languages/cs.ts
@@ -408,6 +408,7 @@ export const csTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Otevřít v novém okně',
     or: 'Nebo',
     order: 'Pořadí',
+    original: 'Originál',
     overwriteExistingData: 'Přepsat existující data pole',
     pageNotFound: 'Stránka nenalezena',
     password: 'Heslo',
@@ -558,12 +559,16 @@ export const csTranslations: DefaultTranslationsObject = {
     focalPoint: 'Středobod',
     focalPointDescription:
       'Přetáhněte bod zaměření přímo na náhled nebo upravte níže uvedené hodnoty.',
+    fromURL: 'Nahrát soubor z URL',
     height: 'Výška',
     lessInfo: 'Méně informací',
+    linkToFile: 'Odkaz na soubor',
     moreInfo: 'Více informací',
     noFile: 'Žádný soubor',
     pasteURL: 'Vložit URL',
     previewSizes: 'Náhled velikostí',
+    renameFile: 'Přejmenovat soubor',
+    replaceFile: 'Nahradit soubor',
     selectCollectionToBrowse: 'Vyberte kolekci pro procházení',
     selectFile: 'Vyberte soubor',
     setCropArea: 'Nastavit oblast ořezu',
diff --git a/packages/translations/src/languages/da.ts b/packages/translations/src/languages/da.ts
index 6c0c6b15735..000567b19f8 100644
--- a/packages/translations/src/languages/da.ts
+++ b/packages/translations/src/languages/da.ts
@@ -409,6 +409,7 @@ export const daTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Åbn i nyt vindue',
     or: 'Eller',
     order: 'Rækkefølge',
+    original: 'Original',
     overwriteExistingData: 'Overskriv eksisterende feltdata',
     pageNotFound: 'Siden blev ikke fundet',
     password: 'Adgangskode',
@@ -560,12 +561,16 @@ export const daTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokuspunkt',
     focalPointDescription:
       'Træk fokuspunktet direkte på forhåndsvisningen eller juster værdierne nedenfor.',
+    fromURL: 'Upload fil fra URL',
     height: 'Højde',
     lessInfo: 'Mindre info',
+    linkToFile: 'Link til fil',
     moreInfo: 'Mere info',
     noFile: 'Ingen fil',
     pasteURL: 'Indsæt URL',
     previewSizes: 'Forhåndsvisningsstørrelser',
+    renameFile: 'Omdøb fil',
+    replaceFile: 'Erstat fil',
     selectCollectionToBrowse: 'Vælg en samling for at browse',
     selectFile: 'Vælg en fil',
     setCropArea: 'Indstil beskæringsområde',
diff --git a/packages/translations/src/languages/de.ts b/packages/translations/src/languages/de.ts
index dde33d645cc..e03b0392855 100644
--- a/packages/translations/src/languages/de.ts
+++ b/packages/translations/src/languages/de.ts
@@ -419,6 +419,7 @@ export const deTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'In neuem Fenster öffnen',
     or: 'oder',
     order: 'Reihenfolge',
+    original: 'Original',
     overwriteExistingData: 'Vorhandene Eingaben überschreiben',
     pageNotFound: 'Seite nicht gefunden',
     password: 'Passwort',
@@ -571,12 +572,16 @@ export const deTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokuspunkt',
     focalPointDescription:
       'Setze den Fokuspunkt direkt auf der Vorschau oder passe die Werte unten an.',
+    fromURL: 'Datei von URL hochladen',
     height: 'Höhe',
     lessInfo: 'Weniger Info',
+    linkToFile: 'Link zur Datei',
     moreInfo: 'Mehr Info',
     noFile: 'Keine Datei',
     pasteURL: 'URL einfügen',
     previewSizes: 'Bildgrößen anzeigen',
+    renameFile: 'Datei umbenennen',
+    replaceFile: 'Datei ersetzen',
     selectCollectionToBrowse: 'Eine Sammlung zum Durchsuchen auswählen',
     selectFile: 'Datei auswählen',
     setCropArea: 'Zuschneide-Bereich festlegen',
diff --git a/packages/translations/src/languages/en.ts b/packages/translations/src/languages/en.ts
index 900a3872c02..0a6be5c6692 100644
--- a/packages/translations/src/languages/en.ts
+++ b/packages/translations/src/languages/en.ts
@@ -410,6 +410,7 @@ export const enTranslations = {
     openInNewWindow: 'Open in new window',
     or: 'Or',
     order: 'Order',
+    original: 'Original',
     overwriteExistingData: 'Overwrite existing field data',
     pageNotFound: 'Page not found',
     password: 'Password',
@@ -560,12 +561,16 @@ export const enTranslations = {
     focalPoint: 'Focal Point',
     focalPointDescription:
       'Drag the focal point directly on the preview or adjust the values below.',
+    fromURL: 'Upload file from URL',
     height: 'Height',
     lessInfo: 'Less info',
+    linkToFile: 'Link to file',
     moreInfo: 'More info',
     noFile: 'No file',
     pasteURL: 'Paste URL',
     previewSizes: 'Preview Sizes',
+    renameFile: 'Rename file',
+    replaceFile: 'Replace file',
     selectCollectionToBrowse: 'Select a Collection to Browse',
     selectFile: 'Select a file',
     setCropArea: 'Set crop area',
diff --git a/packages/translations/src/languages/es.ts b/packages/translations/src/languages/es.ts
index c069a41ff6a..4b8e1f17c00 100644
--- a/packages/translations/src/languages/es.ts
+++ b/packages/translations/src/languages/es.ts
@@ -415,6 +415,7 @@ export const esTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Abrir en nueva ventana',
     or: 'O',
     order: 'Orden',
+    original: 'Original',
     overwriteExistingData: 'Sobrescribir los datos existentes del campo',
     pageNotFound: 'Página no encontrada',
     password: 'Contraseña',
@@ -566,12 +567,16 @@ export const esTranslations: DefaultTranslationsObject = {
     focalPoint: 'Punto Focal',
     focalPointDescription:
       'Arrastra el punto focal directamente en la vista previa o ajusta los valores a continuación.',
+    fromURL: 'Subir archivo desde URL',
     height: 'Alto',
     lessInfo: 'Menos info',
+    linkToFile: 'Enlace al archivo',
     moreInfo: 'Más info',
     noFile: 'Ningún archivo',
     pasteURL: 'Pegar URL',
     previewSizes: 'Tamaños de Vista Previa',
+    renameFile: 'Renombrar archivo',
+    replaceFile: 'Reemplazar archivo',
     selectCollectionToBrowse: 'Selecciona una Colección para navegar',
     selectFile: 'Selecciona un archivo',
     setCropArea: 'Establecer área de recorte',
diff --git a/packages/translations/src/languages/et.ts b/packages/translations/src/languages/et.ts
index b298534623f..7c072fd62b1 100644
--- a/packages/translations/src/languages/et.ts
+++ b/packages/translations/src/languages/et.ts
@@ -407,6 +407,7 @@ export const etTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Ava uues aknas',
     or: 'Või',
     order: 'Järjestus',
+    original: 'Algne',
     overwriteExistingData: 'Kirjuta olemasolevad välja andmed üle',
     pageNotFound: 'Lehte ei leitud',
     password: 'Parool',
@@ -555,12 +556,16 @@ export const etTranslations: DefaultTranslationsObject = {
     fileToUpload: 'Üleslaetav fail',
     focalPoint: 'Fookuspunkt',
     focalPointDescription: 'Lohista fookuspunkti otse eelvaatel või kohanda väärtusi allpool.',
+    fromURL: 'Laadi fail üles URL-i kaudu',
     height: 'Kõrgus',
     lessInfo: 'Vähem infot',
+    linkToFile: 'Lingid failile',
     moreInfo: 'Rohkem infot',
     noFile: 'Pole faili',
     pasteURL: 'Kleebi URL',
     previewSizes: 'Eelvaate suurused',
+    renameFile: 'Faili ümbernimetamine',
+    replaceFile: 'Asendage fail',
     selectCollectionToBrowse: 'Vali kollektsioon sirvimiseks',
     selectFile: 'Vali fail',
     setCropArea: 'Määra kärpeala',
diff --git a/packages/translations/src/languages/fa.ts b/packages/translations/src/languages/fa.ts
index c66bb0f80c3..a5669a24f57 100644
--- a/packages/translations/src/languages/fa.ts
+++ b/packages/translations/src/languages/fa.ts
@@ -403,6 +403,7 @@ export const faTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'باز کردن در پنجره جدید',
     or: 'یا',
     order: 'ترتیب',
+    original: 'اصلی',
     overwriteExistingData: 'بازنویسی اطلاعات موجود در فیلدها',
     pageNotFound: 'صفحه پیدا نشد',
     password: 'رمز عبور',
@@ -552,12 +553,16 @@ export const faTranslations: DefaultTranslationsObject = {
     fileToUpload: 'فایل برای آپلود',
     focalPoint: 'نقطه کانونی',
     focalPointDescription: 'نقطه کانونی را مستقیماً روی تصویر بکشید یا مقادیر زیر را تنظیم کنید.',
+    fromURL: 'بارگذاری فایل از طریق نشانی اینترنتی',
     height: 'ارتفاع',
     lessInfo: 'اطلاعات کمتر',
+    linkToFile: 'پیوند به فایل',
     moreInfo: 'اطلاعات بیشتر',
     noFile: 'فایلی وجود ندارد',
     pasteURL: 'جای‌گذاری URL',
     previewSizes: 'اندازه‌های پیش‌نمایش',
+    renameFile: 'تغییر نام فایل',
+    replaceFile: 'جایگزینی فایل',
     selectCollectionToBrowse: 'یک مجموعه را برای مرور انتخاب کنید',
     selectFile: 'انتخاب فایل',
     setCropArea: 'تنظیم ناحیه برش',
diff --git a/packages/translations/src/languages/fr.ts b/packages/translations/src/languages/fr.ts
index a61af034970..75bdb02ce72 100644
--- a/packages/translations/src/languages/fr.ts
+++ b/packages/translations/src/languages/fr.ts
@@ -420,6 +420,7 @@ export const frTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Ouvrir dans une nouvelle fenêtre',
     or: 'ou',
     order: 'Ordre',
+    original: 'Original',
     overwriteExistingData: 'Écraser les données existantes du champ',
     pageNotFound: 'Page non trouvée',
     password: 'Mot de passe',
@@ -572,12 +573,16 @@ export const frTranslations: DefaultTranslationsObject = {
     focalPoint: 'Point focal',
     focalPointDescription:
       'Faites glisser le point focal directement sur l’aperçu ou ajustez les valeurs ci-dessous.',
+    fromURL: 'Téléverser un fichier à partir d’une URL',
     height: 'Hauteur',
     lessInfo: 'Moins d’infos',
+    linkToFile: 'Lien vers le fichier',
     moreInfo: 'Plus d’infos',
     noFile: 'Aucun fichier',
     pasteURL: "Coller l'URL",
     previewSizes: 'Tailles d’aperçu',
+    renameFile: 'Renommer le fichier',
+    replaceFile: 'Remplacer le fichier',
     selectCollectionToBrowse: 'Sélectionnez une collection à parcourir',
     selectFile: 'Sélectionnez un fichier',
     setCropArea: 'Définir la zone de recadrage',
diff --git a/packages/translations/src/languages/he.ts b/packages/translations/src/languages/he.ts
index 5edd426cc8d..edb9c7843c9 100644
--- a/packages/translations/src/languages/he.ts
+++ b/packages/translations/src/languages/he.ts
@@ -396,6 +396,7 @@ export const heTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'פתח בחלון חדש',
     or: 'או',
     order: 'סדר',
+    original: 'מקורי',
     overwriteExistingData: 'דרוס את נתוני השדה הקיימים',
     pageNotFound: 'הדף לא נמצא',
     password: 'סיסמה',
@@ -543,12 +544,16 @@ export const heTranslations: DefaultTranslationsObject = {
     fileToUpload: 'קובץ להעלאה',
     focalPoint: 'נקודת מיקוד',
     focalPointDescription: 'גרור את נקודת המיקוד ישירות על התצוגה המקדימה או התאם את הערכים למטה.',
+    fromURL: 'העלה קובץ מכתובת URL',
     height: 'גובה',
     lessInfo: 'פחות מידע',
+    linkToFile: 'קישור לקובץ',
     moreInfo: 'מידע נוסף',
     noFile: 'אין קובץ',
     pasteURL: 'הדבק כתובת אתר',
     previewSizes: 'גדלי תצוגה מקדימה',
+    renameFile: 'שנה את שם הקובץ',
+    replaceFile: 'החלף קובץ',
     selectCollectionToBrowse: 'בחר אוסף לצפייה',
     selectFile: 'בחר קובץ',
     setCropArea: 'הגדר אזור חיתוך',
diff --git a/packages/translations/src/languages/hr.ts b/packages/translations/src/languages/hr.ts
index aabe8d6ea73..1a49f5b8d7f 100644
--- a/packages/translations/src/languages/hr.ts
+++ b/packages/translations/src/languages/hr.ts
@@ -409,6 +409,7 @@ export const hrTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Otvori u novom prozoru',
     or: 'ili',
     order: 'Poredak',
+    original: 'Izvorno',
     overwriteExistingData: 'Prepišite postojeće podatke u polju',
     pageNotFound: 'Stranica nije pronađena',
     password: 'Lozinka',
@@ -559,12 +560,16 @@ export const hrTranslations: DefaultTranslationsObject = {
     focalPoint: 'Središnja točka',
     focalPointDescription:
       'Povucite središnju točku izravno na pregledu ili prilagodite vrijednosti ispod.',
+    fromURL: 'Prenesite datoteku s URL-a',
     height: 'Visina',
     lessInfo: 'Manje informacija',
+    linkToFile: 'Poveznica na datoteku',
     moreInfo: 'Više informacija',
     noFile: 'Nema datoteke',
     pasteURL: 'Zalijepi URL',
     previewSizes: 'Veličine pregleda',
+    renameFile: 'Preimenujte datoteku',
+    replaceFile: 'Zamijenite datoteku',
     selectCollectionToBrowse: 'Odaberite kolekciju za pregled',
     selectFile: 'Odaberite datoteku',
     setCropArea: 'Postavi područje usjeva',
diff --git a/packages/translations/src/languages/hu.ts b/packages/translations/src/languages/hu.ts
index 0300a38457a..526a746ed2f 100644
--- a/packages/translations/src/languages/hu.ts
+++ b/packages/translations/src/languages/hu.ts
@@ -414,6 +414,7 @@ export const huTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Megnyitás új ablakban',
     or: 'Vagy',
     order: 'Sorrend',
+    original: 'Eredeti',
     overwriteExistingData: 'Írja felül a meglévő mezőadatokat',
     pageNotFound: 'Az oldal nem található',
     password: 'Jelszó',
@@ -565,12 +566,16 @@ export const huTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fókuszpont',
     focalPointDescription:
       'Húzza az érdekes pontot közvetlenül az előnézetre, vagy állítsa be az alábbi értékeket.',
+    fromURL: 'Fájl feltöltése URL-ről',
     height: 'Magasság',
     lessInfo: 'Kevesebb információ',
+    linkToFile: 'Hivatkozás a fájlra',
     moreInfo: 'További információ',
     noFile: 'Nincs fájl',
     pasteURL: 'URL beillesztése',
     previewSizes: 'Előnézeti méretek',
+    renameFile: 'Fájl átnevezése',
+    replaceFile: 'Fájl cseréje',
     selectCollectionToBrowse: 'Válassza ki a böngészni kívánt gyűjteményt',
     selectFile: 'Válasszon ki egy fájlt',
     setCropArea: 'Állítsa be a vágási területet',
diff --git a/packages/translations/src/languages/hy.ts b/packages/translations/src/languages/hy.ts
index 3bcb24b8299..9a585f68c09 100644
--- a/packages/translations/src/languages/hy.ts
+++ b/packages/translations/src/languages/hy.ts
@@ -410,6 +410,7 @@ export const hyTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Բացել նոր պատուհանում',
     or: 'Կամ',
     order: 'Հերթականություն',
+    original: 'Բնօրինակ',
     overwriteExistingData: 'Վերագրել գոյություն ունեցող դաշտի տվյալները',
     pageNotFound: 'Էջը չի գտնվել',
     password: 'Գաղտնաբառ',
@@ -563,12 +564,16 @@ export const hyTranslations: DefaultTranslationsObject = {
     focalPoint: 'Կիզակետ',
     focalPointDescription:
       'Քաշեք կիզակետը անմիջապես նախադիտման վրա կամ կարգավորեք ստորև նշված արժեքները։',
+    fromURL: 'Վերբեռնել ֆայլը URL-ով',
     height: 'Բարձրություն',
     lessInfo: 'Ավելի քիչ տեղեկություն',
+    linkToFile: 'Հղում դեպի ֆայլ',
     moreInfo: 'Ավելի շատ տեղեկություն',
     noFile: 'Ֆայլ չկա',
     pasteURL: 'Տեղադրել URL',
     previewSizes: 'Նախադիտման չափեր',
+    renameFile: 'Վերանվանել ֆայլը',
+    replaceFile: 'Փոխարինել ֆայլը',
     selectCollectionToBrowse: 'Ընտրեք հավաքածու՝ դիտելու համար',
     selectFile: 'Ընտրեք ֆայլ',
     setCropArea: 'Սահմանել կտրվող տարածքի չափը',
diff --git a/packages/translations/src/languages/id.ts b/packages/translations/src/languages/id.ts
index 58c3bc72073..b000dac10f5 100644
--- a/packages/translations/src/languages/id.ts
+++ b/packages/translations/src/languages/id.ts
@@ -412,6 +412,7 @@ export const idTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Buka di jendela baru',
     or: 'Atau',
     order: 'Urutan',
+    original: 'Asli',
     overwriteExistingData: 'Timpa data isian yang ada',
     pageNotFound: 'Halaman tidak ditemukan',
     password: 'Kata Sandi',
@@ -564,12 +565,16 @@ export const idTranslations: DefaultTranslationsObject = {
     focalPoint: 'Titik Fokus',
     focalPointDescription:
       'Seret titik fokus langsung pada pratinjau atau sesuaikan nilai di bawah ini.',
+    fromURL: 'Unggah berkas dari URL',
     height: 'Tinggi',
     lessInfo: 'Info lebih sedikit',
+    linkToFile: 'Tautan ke berkas',
     moreInfo: 'Info lebih lanjut',
     noFile: 'Tidak ada file',
     pasteURL: 'Tempel URL',
     previewSizes: 'Ukuran Pratinjau',
+    renameFile: 'Ganti nama file',
+    replaceFile: 'Ganti berkas',
     selectCollectionToBrowse: 'Pilih Koleksi untuk Dijelajahi',
     selectFile: 'Pilih file',
     setCropArea: 'Atur area pangkas',
diff --git a/packages/translations/src/languages/is.ts b/packages/translations/src/languages/is.ts
index 62de5e0553a..672ce62b57c 100644
--- a/packages/translations/src/languages/is.ts
+++ b/packages/translations/src/languages/is.ts
@@ -408,6 +408,7 @@ export const isTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Opna í nýjum glugga',
     or: 'Eða',
     order: 'Röð',
+    original: 'Upprunalegt',
     overwriteExistingData: 'Yfirskrifa skráð gögn í reit',
     pageNotFound: 'Síða fannst ekki',
     password: 'Lykilorð',
@@ -559,12 +560,16 @@ export const isTranslations: DefaultTranslationsObject = {
     focalPoint: 'Brennipunktur',
     focalPointDescription:
       'Dragðu brennipunktinn beint á forskoðunina eða stilltu gildin hér að neðan.',
+    fromURL: 'Hladdu inn skrá úr slóð',
     height: 'Hæð',
     lessInfo: 'Minni upplýsingar',
+    linkToFile: 'Tengill á skrá',
     moreInfo: 'Fleiri upplýsingar',
     noFile: 'Engin skrá',
     pasteURL: 'Líma vefslóð',
     previewSizes: 'Forskoðunarstærðir',
+    renameFile: 'Endurnefna skrá',
+    replaceFile: 'Skipta út skrá',
     selectCollectionToBrowse: 'Veldu safn til að skoða',
     selectFile: 'Veldu skrá',
     setCropArea: 'Stilla klippingarsvæði',
diff --git a/packages/translations/src/languages/it.ts b/packages/translations/src/languages/it.ts
index 4ccb426667c..5488aee4973 100644
--- a/packages/translations/src/languages/it.ts
+++ b/packages/translations/src/languages/it.ts
@@ -413,6 +413,7 @@ export const itTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Apri in una nuova finestra',
     or: 'Oppure',
     order: 'Ordine',
+    original: 'Originale',
     overwriteExistingData: 'Sovrascrivi i dati del campo esistente',
     pageNotFound: 'Pagina non trovata',
     password: 'Password',
@@ -565,12 +566,16 @@ export const itTranslations: DefaultTranslationsObject = {
     focalPoint: 'Punto Focale',
     focalPointDescription:
       "Trascina il punto focale direttamente sull'anteprima o regola i valori sottostanti.",
+    fromURL: 'Carica file da URL',
     height: 'Altezza',
     lessInfo: 'Meno info',
+    linkToFile: 'Collega al file',
     moreInfo: 'Più info',
     noFile: 'Nessun file',
     pasteURL: 'Incolla URL',
     previewSizes: 'Anteprime Dimensioni',
+    renameFile: 'Rinomina file',
+    replaceFile: 'Sostituisci file',
     selectCollectionToBrowse: 'Seleziona una Collezione da Sfogliare',
     selectFile: 'Seleziona un file',
     setCropArea: 'Imposta area di ritaglio',
diff --git a/packages/translations/src/languages/ja.ts b/packages/translations/src/languages/ja.ts
index 07f3f83fbe2..9f3c958c94e 100644
--- a/packages/translations/src/languages/ja.ts
+++ b/packages/translations/src/languages/ja.ts
@@ -411,6 +411,7 @@ export const jaTranslations: DefaultTranslationsObject = {
     openInNewWindow: '新しいウィンドウで開く',
     or: 'または',
     order: '表示順',
+    original: 'オリジナル',
     overwriteExistingData: '既存のフィールドデータを上書きする',
     pageNotFound: 'ページが見つかりません',
     password: 'パスワード',
@@ -559,12 +560,16 @@ export const jaTranslations: DefaultTranslationsObject = {
     fileToUpload: 'アップロードするファイル',
     focalPoint: '焦点',
     focalPointDescription: 'プレビュー上で焦点を直接ドラッグするか、下の値を調整してください。',
+    fromURL: 'URLからファイルをアップロード',
     height: '高さ',
     lessInfo: '詳細を隠す',
+    linkToFile: 'ファイルへのリンク',
     moreInfo: '詳細を表示',
     noFile: 'ファイルなし',
     pasteURL: 'URLを貼り付け',
     previewSizes: 'プレビューサイズ',
+    renameFile: 'ファイル名を変更',
+    replaceFile: 'ファイルを差し替える',
     selectCollectionToBrowse: '閲覧するコレクションを選択',
     selectFile: 'ファイルを選択',
     setCropArea: 'クロップエリアを設定する',
diff --git a/packages/translations/src/languages/ko.ts b/packages/translations/src/languages/ko.ts
index 0248adf27cc..07d214800fe 100644
--- a/packages/translations/src/languages/ko.ts
+++ b/packages/translations/src/languages/ko.ts
@@ -407,6 +407,7 @@ export const koTranslations: DefaultTranslationsObject = {
     openInNewWindow: '새 창에서 열기',
     or: '또는',
     order: '순서',
+    original: '원본',
     overwriteExistingData: '기존 필드 데이터 덮어쓰기',
     pageNotFound: '페이지를 찾을 수 없음',
     password: '비밀번호',
@@ -557,12 +558,16 @@ export const koTranslations: DefaultTranslationsObject = {
     fileToUpload: '업로드할 파일',
     focalPoint: '초점',
     focalPointDescription: '미리보기에서 초점을 직접 드래그하거나 아래의 값을 조정하세요.',
+    fromURL: 'URL에서 파일 업로드',
     height: '높이',
     lessInfo: '정보 숨기기',
+    linkToFile: '파일로 연결',
     moreInfo: '정보 더보기',
     noFile: '파일 없음',
     pasteURL: 'URL 붙여넣기',
     previewSizes: '미리보기 크기',
+    renameFile: '파일 이름 변경',
+    replaceFile: '파일 교체',
     selectCollectionToBrowse: '찾을 컬렉션 선택',
     selectFile: '파일 선택',
     setCropArea: '자르기 영역 설정',
diff --git a/packages/translations/src/languages/lt.ts b/packages/translations/src/languages/lt.ts
index 37ea0f17000..6bcde767971 100644
--- a/packages/translations/src/languages/lt.ts
+++ b/packages/translations/src/languages/lt.ts
@@ -412,6 +412,7 @@ export const ltTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Atidaryti naujame lange',
     or: 'Arba',
     order: 'Užsakyti',
+    original: 'Originalas',
     overwriteExistingData: 'Perrašyti esamus lauko duomenis',
     pageNotFound: 'Puslapis nerastas',
     password: 'Slaptažodis',
@@ -561,12 +562,16 @@ export const ltTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokuso Taškas',
     focalPointDescription:
       'Temkite fokusavimo tašką tiesiogiai peržiūroje arba reguliuokite žemiau esančias reikšmes.',
+    fromURL: 'Įkelti failą iš URL',
     height: 'Aukštis',
     lessInfo: 'Mažiau informacijos',
+    linkToFile: 'Nuoroda į failą',
     moreInfo: 'Daugiau informacijos',
     noFile: 'Nėra failo',
     pasteURL: 'Įklijuokite URL',
     previewSizes: 'Peržiūros dydžiai',
+    renameFile: 'Pervadinti failą',
+    replaceFile: 'Pakeisti failą',
     selectCollectionToBrowse: 'Pasirinkite kolekciją, kurią norėtumėte naršyti',
     selectFile: 'Pasirinkite failą',
     setCropArea: 'Nustatykite pjovimo plotą',
diff --git a/packages/translations/src/languages/lv.ts b/packages/translations/src/languages/lv.ts
index 78408516d1c..4cc716e1174 100644
--- a/packages/translations/src/languages/lv.ts
+++ b/packages/translations/src/languages/lv.ts
@@ -411,6 +411,7 @@ export const lvTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Atvērt jaunā logā',
     or: 'Vai',
     order: 'Kārtība',
+    original: 'Oriģināls',
     overwriteExistingData: 'Pārrakstīt esošos datus',
     pageNotFound: 'Lapa nav atrasta',
     password: 'Parole',
@@ -560,12 +561,16 @@ export const lvTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokusa punkts',
     focalPointDescription:
       'Velciet fokusa punktu tieši priekšskatījumā vai pielāgojiet vērtības zemāk.',
+    fromURL: 'Augšupielādēt failu no URL',
     height: 'Augstums',
     lessInfo: 'Mazāk informācijas',
+    linkToFile: 'Saite uz failu',
     moreInfo: 'Vairāk informācijas',
     noFile: 'Nav faila',
     pasteURL: 'Ielīmēt URL',
     previewSizes: 'Priekšskatījuma izmēri',
+    renameFile: 'Pārsaukt failu',
+    replaceFile: 'Aizstāt failu',
     selectCollectionToBrowse: 'Izvēlieties kolekciju, ko pārlūkot',
     selectFile: 'Izvēlieties failu',
     setCropArea: 'Iestatīt apgriešanas apgabalu',
diff --git a/packages/translations/src/languages/my.ts b/packages/translations/src/languages/my.ts
index 2f776750c92..758a5eece4e 100644
--- a/packages/translations/src/languages/my.ts
+++ b/packages/translations/src/languages/my.ts
@@ -414,6 +414,7 @@ export const myTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'ဝင်းဒိုးအသစ်တွင် ဖွင့်ပါ',
     or: 'သို့မဟုတ်',
     order: 'အစဉ်လိုက်',
+    original: 'မူရင်း',
     overwriteExistingData: 'ရှိပြီးသား အကွက်ဒေတာကို အစားထိုးပါ',
     pageNotFound: 'ရောက်ရှိနေသော စာမျက်နှာသည် မရှိပါ။',
     password: 'စကားဝှက်',
@@ -567,12 +568,16 @@ export const myTranslations: DefaultTranslationsObject = {
     focalPoint: 'အကန့်အသတ်ချုပ်',
     focalPointDescription:
       'ပြသနားရထားသည့်ပုံအားထိန်းသိမ်းရန် ဖိုကယ်ပိုင်းကို တိုက်ရိုက်ပွဲ့နိုင်သည် သို',
+    fromURL: 'URL မှတဆင့်ဖိုင် တင်သွင်းပါ',
     height: 'Height',
     lessInfo: 'အချက်အလက်နည်းတယ်။',
+    linkToFile: 'ဖိုင်သို့ ချိတ်ဆက်မှု',
     moreInfo: 'အချက်အလက်',
     noFile: 'ဖိုင် မရှိပါ',
     pasteURL: 'URL ကို ကူးထည့်ပါ',
     previewSizes: 'အစမ်းကြည့်အရွယ်အစားများ',
+    renameFile: 'ဖိုင်အမည်ပြောင်းရန်',
+    replaceFile: 'ဖိုင်ကို ပြန်လည်အစားထိုးပါ',
     selectCollectionToBrowse: 'စုစည်းမှု တစ်ခုခုကို ရွေးချယ်ပါ။',
     selectFile: 'ဖိုင်ရွေးပါ။',
     setCropArea: 'စပြန်းနယ်မြေထားပါ',
@@ -671,8 +676,7 @@ export const myTranslations: DefaultTranslationsObject = {
     restoring: 'ပြန်ယူနေဆဲ...',
     reverting: 'ပြန်ပြောင်းနေဆဲ...',
     revertToPublished: 'အများဆိုင်သို့ ပြန်ပြောင်းပါ။',
-    revertUnsuccessful:
-      'ပြန်လည်ပြောင်းခြင်း မအောင်မြင်ပါ။ ယခင်က ထုတ်ဝေထားသော ဗားရှင်း မတွေ့ပါ။',
+    revertUnsuccessful: 'ပြန်လည်ပြောင်းခြင်း မအောင်မြင်ပါ။ ယခင်က ထုတ်ဝေထားသော ဗားရှင်း မတွေ့ပါ။',
     saveDraft: 'မှုကြမ်းကို သိမ်းဆည်းမည်။',
     scheduledSuccessfully: 'အောင်မြင်စွာ နေ့စွဲထားသည်။',
     schedulePublish: 'ပြဌာန်းထုတ်ဝေချိန်း',
diff --git a/packages/translations/src/languages/nb.ts b/packages/translations/src/languages/nb.ts
index d3f39f15252..16f7a9c6321 100644
--- a/packages/translations/src/languages/nb.ts
+++ b/packages/translations/src/languages/nb.ts
@@ -411,6 +411,7 @@ export const nbTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Åpne i nytt vindu',
     or: 'Eller',
     order: 'Rekkefølge',
+    original: 'Original',
     overwriteExistingData: 'Overskriv eksisterende feltdata',
     pageNotFound: 'Siden ble ikke funnet',
     password: 'Passord',
@@ -562,12 +563,16 @@ export const nbTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokuspunkt',
     focalPointDescription:
       'Dra fokuspunktet direkte på forhåndsvisningen eller juster verdiene nedenfor.',
+    fromURL: 'Last opp fil fra URL',
     height: 'Høyde',
     lessInfo: 'Mindre info',
+    linkToFile: 'Lenke til fil',
     moreInfo: 'Mer info',
     noFile: 'Ingen fil',
     pasteURL: 'Lim inn URL',
     previewSizes: 'Forhåndsvisningsstørrelser',
+    renameFile: 'Gi nytt navn til fil',
+    replaceFile: 'Erstatt fil',
     selectCollectionToBrowse: 'Velg en samling å bla i',
     selectFile: 'Velg en fil',
     setCropArea: 'Angi beskjæringsområde',
diff --git a/packages/translations/src/languages/nl.ts b/packages/translations/src/languages/nl.ts
index 32970311903..3e47c8663c8 100644
--- a/packages/translations/src/languages/nl.ts
+++ b/packages/translations/src/languages/nl.ts
@@ -418,6 +418,7 @@ export const nlTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Openen in nieuw venster',
     or: 'Of',
     order: 'Volgorde',
+    original: 'Origineel',
     overwriteExistingData: 'Overschrijf bestaande veldgegevens',
     pageNotFound: 'Pagina niet gevonden',
     password: 'Wachtwoord',
@@ -569,12 +570,16 @@ export const nlTranslations: DefaultTranslationsObject = {
     focalPoint: 'Focuspunt',
     focalPointDescription:
       'Sleep het focuspunt rechtstreeks op de voorvertoning of pas de waarden hieronder aan.',
+    fromURL: 'Bestand uploaden vanaf URL',
     height: 'Hoogte',
     lessInfo: 'Minder info',
+    linkToFile: 'Koppeling naar bestand',
     moreInfo: 'Meer info',
     noFile: 'Geen bestand',
     pasteURL: 'URL plakken',
     previewSizes: 'Voorbeeldgroottes',
+    renameFile: 'Bestand hernoemen',
+    replaceFile: 'Bestand vervangen',
     selectCollectionToBrowse: 'Selecteer een collectie om door te bladeren',
     selectFile: 'Selecteer een bestand',
     setCropArea: 'Stel bijsnijdgebied in',
diff --git a/packages/translations/src/languages/pl.ts b/packages/translations/src/languages/pl.ts
index c5c663bd807..9192d674a70 100644
--- a/packages/translations/src/languages/pl.ts
+++ b/packages/translations/src/languages/pl.ts
@@ -410,6 +410,7 @@ export const plTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Otwórz w nowym oknie',
     or: 'lub',
     order: 'Kolejność',
+    original: 'Oryginał',
     overwriteExistingData: 'Nadpisz istniejące dane pola',
     pageNotFound: 'Strona nie znaleziona',
     password: 'Hasło',
@@ -559,12 +560,16 @@ export const plTranslations: DefaultTranslationsObject = {
     focalPoint: 'Punkt centralny',
     focalPointDescription:
       'Przeciągnij punkt centralny bezpośrednio na podglądzie lub dostosuj wartości poniżej.',
+    fromURL: 'Prześlij plik z adresu URL',
     height: 'Wysokość',
     lessInfo: 'Mniej informacji',
+    linkToFile: 'Link do pliku',
     moreInfo: 'Więcej informacji',
     noFile: 'Brak pliku',
     pasteURL: 'Wklej URL',
     previewSizes: 'Rozmiary podglądu',
+    renameFile: 'Zmień nazwę pliku',
+    replaceFile: 'Zastąp plik',
     selectCollectionToBrowse: 'Wybierz kolekcję aby przejrzeć',
     selectFile: 'Wybierz plik',
     setCropArea: 'Ustaw obszar kadrowania',
diff --git a/packages/translations/src/languages/pt.ts b/packages/translations/src/languages/pt.ts
index 213c8c95303..0ecd276a5fd 100644
--- a/packages/translations/src/languages/pt.ts
+++ b/packages/translations/src/languages/pt.ts
@@ -411,6 +411,7 @@ export const ptTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Abrir em nova janela',
     or: 'Ou',
     order: 'Ordem',
+    original: 'Original',
     overwriteExistingData: 'Sobrescrever dados de campo existentes',
     pageNotFound: 'Página não encontrada',
     password: 'Senha',
@@ -562,12 +563,16 @@ export const ptTranslations: DefaultTranslationsObject = {
     focalPoint: 'Ponto Focal',
     focalPointDescription:
       'Arraste o ponto focal diretamente na pré-visualização ou ajuste os valores abaixo.',
+    fromURL: 'Carregar arquivo a partir de URL',
     height: 'Altura',
     lessInfo: 'Ver menos',
+    linkToFile: 'Link para arquivo',
     moreInfo: 'Ver mais',
     noFile: 'Sem arquivo',
     pasteURL: 'Colar URL',
     previewSizes: 'Tamanhos de Pré-visualização',
+    renameFile: 'Renomear arquivo',
+    replaceFile: 'Substituir arquivo',
     selectCollectionToBrowse: 'Selecione uma Coleção para Navegar',
     selectFile: 'Selecione um arquivo',
     setCropArea: 'Definir área de corte',
diff --git a/packages/translations/src/languages/ro.ts b/packages/translations/src/languages/ro.ts
index 9f23d864c1a..1cca30a625a 100644
--- a/packages/translations/src/languages/ro.ts
+++ b/packages/translations/src/languages/ro.ts
@@ -416,6 +416,7 @@ export const roTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Deschide într-o fereastră nouă',
     or: 'Sau',
     order: 'ORdine',
+    original: 'Original',
     overwriteExistingData: 'Suprascrieți datele existente din câmp',
     pageNotFound: 'Pagina nu a fost găsită',
     password: 'Parola',
@@ -566,12 +567,16 @@ export const roTranslations: DefaultTranslationsObject = {
     focalPoint: 'Punct central',
     focalPointDescription:
       'Trageți punctul focal direct pe previzualizare sau ajustați valorile de mai jos.',
+    fromURL: 'Încarcă fișier din URL',
     height: 'Înălțime',
     lessInfo: 'Mai puține informații',
+    linkToFile: 'Link către fișier',
     moreInfo: 'Mai multe informații',
     noFile: 'Niciun fișier',
     pasteURL: 'Lipește URL',
     previewSizes: 'Dimensiuni Previzualizare',
+    renameFile: 'Redenumiți fișierul',
+    replaceFile: 'Înlocuiți fișierul',
     selectCollectionToBrowse: 'Selectați o colecție pentru navigare',
     selectFile: 'Selectați un fișier',
     setCropArea: 'Setați zona de decupare',
diff --git a/packages/translations/src/languages/rs.ts b/packages/translations/src/languages/rs.ts
index 59637fa4867..2419683cd0c 100644
--- a/packages/translations/src/languages/rs.ts
+++ b/packages/translations/src/languages/rs.ts
@@ -410,6 +410,7 @@ export const rsTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Отвори у новом прозору',
     or: 'Или',
     order: 'Редослед',
+    original: 'Оригинал',
     overwriteExistingData: 'Prepišite postojeće podatke u polju',
     pageNotFound: 'Страница није пронађена',
     password: 'Лозинка',
@@ -559,12 +560,16 @@ export const rsTranslations: DefaultTranslationsObject = {
     focalPoint: 'Централна тачка',
     focalPointDescription:
       'Превуците средишњу тачку директно на преглед или прилагодите вредности испод.',
+    fromURL: 'Отпремите датотеку са URL-а',
     height: 'Висина',
     lessInfo: 'Мање информација',
+    linkToFile: 'Веза до фајла',
     moreInfo: 'Више информација',
     noFile: 'Nema fajla',
     pasteURL: 'Налепи URL',
     previewSizes: 'Величине прегледа',
+    renameFile: 'Преименујте фајл',
+    replaceFile: 'Замените датотеку',
     selectCollectionToBrowse: 'Одаберите колекцију за преглед',
     selectFile: 'Одаберите датотеку',
     setCropArea: 'Поставите подручје за исечену слику',
diff --git a/packages/translations/src/languages/rsLatin.ts b/packages/translations/src/languages/rsLatin.ts
index 9eda7ad9504..3024eb081ba 100644
--- a/packages/translations/src/languages/rsLatin.ts
+++ b/packages/translations/src/languages/rsLatin.ts
@@ -410,6 +410,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Otvori u novom prozoru',
     or: 'Ili',
     order: 'Redosled',
+    original: 'Original',
     overwriteExistingData: 'Prepiši postojeće podatke iz polja',
     pageNotFound: 'Stranica nije pronađena',
     password: 'Lozinka',
@@ -560,12 +561,16 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
     focalPoint: 'Centralna tačka',
     focalPointDescription:
       'Prevucite središnju tačku direktno na pregled ili prilagodite vrednosti ispod.',
+    fromURL: 'Otpremite fajl sa URL adrese',
     height: 'Visina',
     lessInfo: 'Manje informacija',
+    linkToFile: 'Link ka fajlu',
     moreInfo: 'Više informacija',
     noFile: 'Nema datoteke',
     pasteURL: 'Nalepi URL',
     previewSizes: 'Veličine pregleda',
+    renameFile: 'Preimenujte fajl',
+    replaceFile: 'Zamenite fajl',
     selectCollectionToBrowse: 'Odaberite kolekciju za pregled',
     selectFile: 'Odaberite datoteku',
     setCropArea: 'Postavite područje za isečenu sliku',
diff --git a/packages/translations/src/languages/ru.ts b/packages/translations/src/languages/ru.ts
index f4d69a2d024..9f3bc127656 100644
--- a/packages/translations/src/languages/ru.ts
+++ b/packages/translations/src/languages/ru.ts
@@ -413,6 +413,7 @@ export const ruTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Открыть в новом окне',
     or: 'Или же',
     order: 'Порядок',
+    original: 'Оригинал',
     overwriteExistingData: 'Перезаписать существующие данные поля',
     pageNotFound: 'Страница не найдена',
     password: 'Пароль',
@@ -564,12 +565,16 @@ export const ruTranslations: DefaultTranslationsObject = {
     focalPoint: 'Центральная точка',
     focalPointDescription:
       'Перетащите фокусное расстояние прямо на предварительный просмотр или отрегулируйте значения ниже.',
+    fromURL: 'Загрузить файл по URL',
     height: 'Высота',
     lessInfo: 'Меньше информации',
+    linkToFile: 'Ссылка на файл',
     moreInfo: 'Больше информации',
     noFile: 'Нет файла',
     pasteURL: 'Вставить URL',
     previewSizes: 'Предварительный просмотр размеров',
+    renameFile: 'Переименовать файл',
+    replaceFile: 'Заменить файл',
     selectCollectionToBrowse: 'Выберите Коллекцию для просмотра',
     selectFile: 'Выберите файл',
     setCropArea: 'Установите область обрезки',
diff --git a/packages/translations/src/languages/sk.ts b/packages/translations/src/languages/sk.ts
index 170a3eee1ed..990e5cedfe3 100644
--- a/packages/translations/src/languages/sk.ts
+++ b/packages/translations/src/languages/sk.ts
@@ -409,6 +409,7 @@ export const skTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Otvoriť v novom okne',
     or: 'Alebo',
     order: 'Poradie',
+    original: 'Originál',
     overwriteExistingData: 'Prepísať existujúce pole dát',
     pageNotFound: 'Stránka nenájdená',
     password: 'Heslo',
@@ -558,12 +559,16 @@ export const skTranslations: DefaultTranslationsObject = {
     focalPoint: 'Stredobod',
     focalPointDescription:
       'Potiahnite bod stredobodu priamo na náhľad alebo upravte hodnoty nižšie.',
+    fromURL: 'Nahrať súbor z URL adresy',
     height: 'Výška',
     lessInfo: 'Menej informácií',
+    linkToFile: 'Odkaz na súbor',
     moreInfo: 'Viac informácií',
     noFile: 'Žiadny súbor',
     pasteURL: 'Vložiť URL',
     previewSizes: 'Náhľady veľkostí',
+    renameFile: 'Premenovať súbor',
+    replaceFile: 'Nahradiť súbor',
     selectCollectionToBrowse: 'Vyberte kolekciu na prezeranie',
     selectFile: 'Vyberte súbor',
     setCropArea: 'Nastaviť oblasť orezania',
diff --git a/packages/translations/src/languages/sl.ts b/packages/translations/src/languages/sl.ts
index 623b327f740..47adf9b7c92 100644
--- a/packages/translations/src/languages/sl.ts
+++ b/packages/translations/src/languages/sl.ts
@@ -409,6 +409,7 @@ export const slTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Odpri v novem oknu',
     or: 'Ali',
     order: 'Vrstni red',
+    original: 'Izvirnik',
     overwriteExistingData: 'Prepišite obstoječe podatke polja',
     pageNotFound: 'Stran ni najdena',
     password: 'Geslo',
@@ -559,12 +560,16 @@ export const slTranslations: DefaultTranslationsObject = {
     focalPoint: 'Žarišče',
     focalPointDescription:
       'Povlecite žarišče neposredno na predogledu ali prilagodite vrednosti spodaj.',
+    fromURL: 'Naloži datoteko iz URL-ja',
     height: 'Višina',
     lessInfo: 'Manj informacij',
+    linkToFile: 'Povezava do datoteke',
     moreInfo: 'Več informacij',
     noFile: 'Ni datoteke.',
     pasteURL: 'Prilepi URL',
     previewSizes: 'Velikosti predogleda',
+    renameFile: 'Preimenuj datoteko',
+    replaceFile: 'Zamenjaj datoteko',
     selectCollectionToBrowse: 'Izberite zbirko za brskanje',
     selectFile: 'Izberite datoteko',
     setCropArea: 'Nastavi območje obrezovanja',
diff --git a/packages/translations/src/languages/sv.ts b/packages/translations/src/languages/sv.ts
index 8c6fd2325d9..ad84a700f9c 100644
--- a/packages/translations/src/languages/sv.ts
+++ b/packages/translations/src/languages/sv.ts
@@ -411,6 +411,7 @@ export const svTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Öppna i nytt fönster',
     or: 'Eller',
     order: 'Ordning',
+    original: 'Original',
     overwriteExistingData: 'Skriv över befintlig fältdata',
     pageNotFound: 'Sidan hittas inte',
     password: 'Lösenord',
@@ -562,12 +563,16 @@ export const svTranslations: DefaultTranslationsObject = {
     focalPoint: 'Fokuspunkt',
     focalPointDescription:
       'Dra fokuspunkten direkt på förhandsgranskningen eller justera värdena nedan.',
+    fromURL: 'Ladda upp fil från URL',
     height: 'Höjd',
     lessInfo: 'Mindre info',
+    linkToFile: 'Länk till fil',
     moreInfo: 'Mer info',
     noFile: 'Ingen fil',
     pasteURL: 'Klistra in URL',
     previewSizes: 'Förhandsgranska storlekar',
+    renameFile: 'Byt namn på fil',
+    replaceFile: 'Ersätt fil',
     selectCollectionToBrowse: 'Välj en samling att bläddra i',
     selectFile: 'Välj en fil',
     setCropArea: 'Ange beskärning',
diff --git a/packages/translations/src/languages/ta.ts b/packages/translations/src/languages/ta.ts
index a389717d90d..9cf4273068b 100644
--- a/packages/translations/src/languages/ta.ts
+++ b/packages/translations/src/languages/ta.ts
@@ -409,6 +409,7 @@ export const taTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'புதிய சாளரத்தில் திற',
     or: 'அல்லது',
     order: 'வரிசை',
+    original: 'மூலம்',
     overwriteExistingData: 'ஏற்கனவே உள்ள புலத் தரவை மேலெழுது',
     pageNotFound: 'பக்கம் கிடைக்கவில்லை',
     password: 'கடவுச்சொல்',
@@ -560,12 +561,16 @@ export const taTranslations: DefaultTranslationsObject = {
     focalPoint: 'கவனம் செலுத்தும் புள்ளி',
     focalPointDescription:
       'முன்னோட்டத்தில் புள்ளியை நேரடியாக இழுத்து விடவும் அல்லது கீழே உள்ள மதிப்புகளை மாற்றவும்.',
+    fromURL: 'URL-ில் இருந்து கோப்பை பதிவேற்று',
     height: 'உயரம்',
     lessInfo: 'குறைந்த தகவல்',
+    linkToFile: 'கோப்பிற்கான இணைப்பு',
     moreInfo: 'மேலும் தகவல்',
     noFile: 'கோப்பு இல்லை',
     pasteURL: 'URL ஒட்டுக',
     previewSizes: 'முன்னோட்ட அளவுகள்',
+    renameFile: 'கோப்பை மறுபெயரிடு',
+    replaceFile: 'கோப்பை மாற்றவும்',
     selectCollectionToBrowse: 'உலாவ தொகுப்பைத் தேர்ந்தெடுக்கவும்',
     selectFile: 'கோப்பைத் தேர்ந்தெடுக்கவும்',
     setCropArea: 'வெட்டும் பகுதியை அமைக்கவும்',
diff --git a/packages/translations/src/languages/th.ts b/packages/translations/src/languages/th.ts
index 66f88a73b99..6895b8c17f6 100644
--- a/packages/translations/src/languages/th.ts
+++ b/packages/translations/src/languages/th.ts
@@ -402,6 +402,7 @@ export const thTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'เปิดในหน้าต่างใหม่',
     or: 'หรือ',
     order: 'เรียงตาม',
+    original: 'ต้นฉบับ',
     overwriteExistingData: 'เขียนทับข้อมูลในฟิลด์ที่มีอยู่แล้ว',
     pageNotFound: 'ไม่พบหน้าที่ต้องการ',
     password: 'รหัสผ่าน',
@@ -550,12 +551,16 @@ export const thTranslations: DefaultTranslationsObject = {
     fileToUpload: 'อัปโหลดไฟล์',
     focalPoint: 'จุดสนใจ',
     focalPointDescription: 'ลากจุดโฟกัสตรงบนภาพตัวอย่างหรือปรับค่าที่อยู่ด้านล่าง',
+    fromURL: 'อัปโหลดไฟล์จาก URL',
     height: 'ความสูง',
     lessInfo: 'ซ่อนข้อมูล',
+    linkToFile: 'ลิงก์ไปยังไฟล์',
     moreInfo: 'แสดงข้อมูล',
     noFile: 'ไม่มีไฟล์',
     pasteURL: 'วาง URL',
     previewSizes: 'ขนาดตัวอย่าง',
+    renameFile: 'เปลี่ยนชื่อไฟล์',
+    replaceFile: 'แทนที่ไฟล์',
     selectCollectionToBrowse: 'เลือก Collection ที่ต้องการค้นหา',
     selectFile: 'เลือกไฟล์',
     setCropArea: 'ตั้งค่าพื้นที่การครอบตัด',
diff --git a/packages/translations/src/languages/tr.ts b/packages/translations/src/languages/tr.ts
index 82a23c578b3..e78d1ec991e 100644
--- a/packages/translations/src/languages/tr.ts
+++ b/packages/translations/src/languages/tr.ts
@@ -414,6 +414,7 @@ export const trTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Yeni pencerede aç',
     or: 'Or',
     order: 'Order',
+    original: 'Orijinal',
     overwriteExistingData: 'Mevcut alan verilerinin üzerine yazın',
     pageNotFound: 'Sayfa bulunamadı',
     password: 'Parola',
@@ -566,12 +567,16 @@ export const trTranslations: DefaultTranslationsObject = {
     focalPoint: 'Odak Noktası',
     focalPointDescription:
       'Önizlemeye odak noktasını doğrudan sürükleyin veya aşağıdaki değerleri ayarlayın.',
+    fromURL: 'URL’den dosya yükle',
     height: 'Yükseklik',
     lessInfo: 'Daha az bilgi',
+    linkToFile: 'Dosyaya bağlantı',
     moreInfo: 'Daha fazla bilgi',
     noFile: 'Dosya yok',
     pasteURL: 'URL yapıştır',
     previewSizes: 'Önizleme Boyutları',
+    renameFile: 'Dosyayı yeniden adlandır',
+    replaceFile: 'Dosyayı değiştir',
     selectCollectionToBrowse: 'Görüntülenecek bir koleksiyon seçin',
     selectFile: 'Dosya seç',
     setCropArea: 'Mahsul alanını ayarla',
diff --git a/packages/translations/src/languages/uk.ts b/packages/translations/src/languages/uk.ts
index d6627bb6a45..cdf103ef69f 100644
--- a/packages/translations/src/languages/uk.ts
+++ b/packages/translations/src/languages/uk.ts
@@ -408,6 +408,7 @@ export const ukTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Відкрити в новому вікні',
     or: 'або',
     order: 'Порядок',
+    original: 'Оригінал',
     overwriteExistingData: 'Перезаписати існуючі дані поля',
     pageNotFound: 'Сторінка не знайдена',
     password: 'Пароль',
@@ -557,12 +558,16 @@ export const ukTranslations: DefaultTranslationsObject = {
     focalPoint: 'Точка фокусу',
     focalPointDescription:
       'Перетягніть точку фокусу безпосередньо на попередньому перегляді або налаштуйте значення нижче.',
+    fromURL: 'Завантажити файл з URL-адреси',
     height: 'Висота',
     lessInfo: 'Менше інформації',
+    linkToFile: 'Посилання на файл',
     moreInfo: 'Більше інформації',
     noFile: 'Немає файлу',
     pasteURL: 'Вставити URL',
     previewSizes: 'Попередній перегляд розмірів',
+    renameFile: 'Перейменувати файл',
+    replaceFile: 'Замінити файл',
     selectCollectionToBrowse: 'Оберіть колекцію для перегляду',
     selectFile: 'Оберіть файл',
     setCropArea: 'Встановити область обрізки',
diff --git a/packages/translations/src/languages/vi.ts b/packages/translations/src/languages/vi.ts
index 6e9ddb7f70e..2fb55de4fc7 100644
--- a/packages/translations/src/languages/vi.ts
+++ b/packages/translations/src/languages/vi.ts
@@ -411,6 +411,7 @@ export const viTranslations: DefaultTranslationsObject = {
     openInNewWindow: 'Mở trong cửa sổ mới',
     or: 'hoặc',
     order: 'Thứ tự',
+    original: 'Bản gốc',
     overwriteExistingData: 'Ghi đè dữ liệu trường hiện tại',
     pageNotFound: 'Không tìm thấy trang',
     password: 'Mật khẩu',
@@ -560,12 +561,16 @@ export const viTranslations: DefaultTranslationsObject = {
     focalPoint: 'Điểm trọng tâm',
     focalPointDescription:
       'Kéo điểm tiêu điểm trực tiếp trên ảnh xem trước hoặc điều chỉnh giá trị bên dưới.',
+    fromURL: 'Tải lên tệp từ URL',
     height: 'Chiều cao',
     lessInfo: 'Hiển thị ít hơn',
+    linkToFile: 'Liên kết tới tệp',
     moreInfo: 'Xem thêm',
     noFile: 'Không có tệp',
     pasteURL: 'Dán URL',
     previewSizes: 'Kích cỡ xem trước',
+    renameFile: 'Đổi tên tệp',
+    replaceFile: 'Thay thế tệp',
     selectCollectionToBrowse: 'Chọn một Collection để tìm',
     selectFile: 'Chọn một file',
     setCropArea: 'Đặt khu vực cắt',
diff --git a/packages/translations/src/languages/zh.ts b/packages/translations/src/languages/zh.ts
index 0abf524ca07..d7a88609025 100644
--- a/packages/translations/src/languages/zh.ts
+++ b/packages/translations/src/languages/zh.ts
@@ -390,6 +390,7 @@ export const zhTranslations: DefaultTranslationsObject = {
     openInNewWindow: '在新窗口中打开',
     or: '或',
     order: '排序',
+    original: '原始',
     overwriteExistingData: '覆盖现有字段数据',
     pageNotFound: '未找到页面',
     password: '密码',
@@ -536,12 +537,16 @@ export const zhTranslations: DefaultTranslationsObject = {
     fileToUpload: '要上传的文件',
     focalPoint: '焦点',
     focalPointDescription: '直接在预览中拖动焦点或调整下面的值。',
+    fromURL: '从网址上传文件',
     height: '高度',
     lessInfo: '更少信息',
+    linkToFile: '链接到文件',
     moreInfo: '更多信息',
     noFile: '没有文件',
     pasteURL: '粘贴网址',
     previewSizes: '预览尺寸',
+    renameFile: '重命名文件',
+    replaceFile: '替换文件',
     selectCollectionToBrowse: '选择一个要浏览的集合',
     selectFile: '选择一个文件',
     setCropArea: '设置裁剪区域',
diff --git a/packages/translations/src/languages/zhTw.ts b/packages/translations/src/languages/zhTw.ts
index b782801cc97..80c5814614f 100644
--- a/packages/translations/src/languages/zhTw.ts
+++ b/packages/translations/src/languages/zhTw.ts
@@ -388,6 +388,7 @@ export const zhTwTranslations: DefaultTranslationsObject = {
     openInNewWindow: '在新視窗中開啟',
     or: '或',
     order: '順序',
+    original: '原始',
     overwriteExistingData: '覆寫現有欄位資料',
     pageNotFound: '找不到此頁面',
     password: '密碼',
@@ -534,12 +535,16 @@ export const zhTwTranslations: DefaultTranslationsObject = {
     fileToUpload: '待上傳的檔案',
     focalPoint: '對焦點',
     focalPointDescription: '直接在預覽圖上拖曳以設定對焦點，或調整下方數值。',
+    fromURL: '從網址上傳檔案',
     height: '高度',
     lessInfo: '顯示較少資訊',
+    linkToFile: '連結至檔案',
     moreInfo: '顯示更多資訊',
     noFile: '無檔案',
     pasteURL: '貼上網址',
     previewSizes: '預覽尺寸',
+    renameFile: '重新命名檔案',
+    replaceFile: '更換檔案',
     selectCollectionToBrowse: '選取要瀏覽的集合',
     selectFile: '選取檔案',
     setCropArea: '設定裁剪區域',
diff --git a/packages/ui/src/elements/AppHeader/index.tsx b/packages/ui/src/elements/AppHeader/index.tsx
index 3d994e43f67..dba97b9baf9 100644
--- a/packages/ui/src/elements/AppHeader/index.tsx
+++ b/packages/ui/src/elements/AppHeader/index.tsx
@@ -36,9 +36,22 @@ export function AppHeader({ CustomAvatar, settingsItemGroups }: Props) {
     config: { localization },
   } = useConfig()
 
+  const headerRef = useRef<HTMLElement>(null)
   const customControlsRef = useRef<HTMLDivElement>(null)
   const [isScrollable, setIsScrollable] = useState(false)
 
+  useEffect(() => {
+    const el = headerRef.current
+    if (!el) {
+      return
+    }
+    const observer = new ResizeObserver(() => {
+      document.documentElement.style.setProperty('--app-header-height', `${el.offsetHeight}px`)
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
   useEffect(() => {
     const checkIsScrollable = () => {
       const el = customControlsRef.current
@@ -59,7 +72,10 @@ export function AppHeader({ CustomAvatar, settingsItemGroups }: Props) {
   const ActionComponents = Actions ? Object.values(Actions) : []
 
   return (
-    <header className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}>
+    <header
+      className={[baseClass, navOpen && `${baseClass}--nav-open`].filter(Boolean).join(' ')}
+      ref={headerRef}
+    >
       <div className={`${baseClass}__content`}>
         <div className={`${baseClass}__wrapper`}>
           <NavToggler className={`${baseClass}__mobile-nav-toggler`} tabIndex={-1} />
diff --git a/packages/ui/src/elements/Dialog/index.css b/packages/ui/src/elements/Dialog/index.css
index 0cfa9c9c0f5..922751170ee 100644
--- a/packages/ui/src/elements/Dialog/index.css
+++ b/packages/ui/src/elements/Dialog/index.css
@@ -38,7 +38,7 @@
   }
 
   .dialog--large {
-    --dialog-width: 640px;
+    --dialog-width: 840px;
   }
 
   .dialog__header {
diff --git a/packages/ui/src/elements/DocumentControls/index.tsx b/packages/ui/src/elements/DocumentControls/index.tsx
index e3fd5bfa590..81dcefa5d5e 100644
--- a/packages/ui/src/elements/DocumentControls/index.tsx
+++ b/packages/ui/src/elements/DocumentControls/index.tsx
@@ -157,7 +157,20 @@ export const DocumentControls: React.FC<{
   const processing = useFormProcessing()
   const initializing = useFormInitializing()
 
+  const rootRef = useRef<HTMLDivElement>(null)
   const i18nRef = useRef(i18n)
+
+  useEffect(() => {
+    const el = rootRef.current
+    if (!el) {
+      return
+    }
+    const observer = new ResizeObserver(() => {
+      document.documentElement.style.setProperty('--doc-controls-height', `${el.offsetHeight}px`)
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
   i18nRef.current = i18n
 
   const updateRelativeTime = useCallback(() => {
@@ -222,6 +235,7 @@ export const DocumentControls: React.FC<{
       className={[baseClass, variant !== 'default' && `${baseClass}--${variant}`]
         .filter(Boolean)
         .join(' ')}
+      ref={rootRef}
     >
       {variant === 'default' && (
         <div className={`${baseClass}__content`}>
diff --git a/packages/ui/src/elements/DocumentHeader/DocumentHeaderRoot/index.tsx b/packages/ui/src/elements/DocumentHeader/DocumentHeaderRoot/index.tsx
new file mode 100644
index 00000000000..109bdee9aef
--- /dev/null
+++ b/packages/ui/src/elements/DocumentHeader/DocumentHeaderRoot/index.tsx
@@ -0,0 +1,33 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+
+const baseClass = 'doc-header'
+
+/**
+ * Client wrapper for the document header that publishes its rendered height as the
+ * `--doc-header-height` CSS variable, mirroring how `AppHeader` and `DocumentControls`
+ * expose their own heights for layout calculations.
+ *
+ * @internal
+ */
+export const DocumentHeaderRoot: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) {
+      return
+    }
+    const observer = new ResizeObserver(() => {
+      document.documentElement.style.setProperty('--doc-header-height', `${el.offsetHeight}px`)
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div className={baseClass} ref={ref}>
+      {children}
+    </div>
+  )
+}
diff --git a/packages/ui/src/elements/DocumentHeader/index.tsx b/packages/ui/src/elements/DocumentHeader/index.tsx
index e4970452e98..315581e4e97 100644
--- a/packages/ui/src/elements/DocumentHeader/index.tsx
+++ b/packages/ui/src/elements/DocumentHeader/index.tsx
@@ -8,7 +8,7 @@ import type {
 import React from 'react'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
-import { Gutter, RenderTitle } from '../../exports/client/index.js'
+import { DocumentHeaderRoot, Gutter, RenderTitle } from '../../exports/client/index.js'
 import { DocumentTabs } from './Tabs/index.js'
 import './index.css'
 
@@ -28,7 +28,7 @@ export const DocumentHeader: React.FC<{
   const { AfterHeader, collectionConfig, globalConfig, hideTabs, permissions, req } = props
 
   return (
-    <div className={baseClass}>
+    <DocumentHeaderRoot>
       <RenderTitle className={`${baseClass}__title`} />
       {!hideTabs && (
         <DocumentTabs
@@ -39,6 +39,6 @@ export const DocumentHeader: React.FC<{
         />
       )}
       {AfterHeader ? <div className={`${baseClass}__after-header`}>{AfterHeader}</div> : null}
-    </div>
+    </DocumentHeaderRoot>
   )
 }
diff --git a/packages/ui/src/elements/Dropzone/index.css b/packages/ui/src/elements/Dropzone/index.css
index 514991a23be..627aac91c36 100644
--- a/packages/ui/src/elements/Dropzone/index.css
+++ b/packages/ui/src/elements/Dropzone/index.css
@@ -4,7 +4,6 @@
     display: flex;
     align-items: flex-start;
     background: transparent;
-    border: var(--stroke-width-small) dashed var(--special-border-translucent);
     border-radius: var(--field-border-radius);
     overflow: clip;
     width: 100%;
@@ -18,7 +17,6 @@
     }
 
     &.dragging {
-      border-color: var(--color-border-selected);
       background: var(--color-bg-brand-tertiary);
 
       * {
@@ -26,22 +24,15 @@
       }
     }
 
-    &:focus-within,
-    &.focused {
-      border-color: var(--color-border-selected);
-      background: var(--color-bg-brand-tertiary);
-      outline: none;
-    }
-
-    &.dropzone--has-error {
-      border-color: var(--color-border-danger-strong);
-    }
-
     @media (max-width: 768px) {
       display: block;
       text-align: center;
     }
 
+    &.dropzone--style-default {
+      padding-block: var(--spacer-3);
+    }
+
     &.dropzone--style-none {
       all: unset;
     }
diff --git a/packages/ui/src/elements/EditUpload/index.css b/packages/ui/src/elements/EditUpload/index.css
index 171c5d99096..8da9da79adc 100644
--- a/packages/ui/src/elements/EditUpload/index.css
+++ b/packages/ui/src/elements/EditUpload/index.css
@@ -1,80 +1,117 @@
 @layer payload-default {
-  .edit-upload {
-    --edit-upload-cell-spacing: var(--spacer-4);
-    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
-    height: 100%;
+  /* Allow the ReactCrop 9999px box-shadow overlay to escape the dialog bounds.
+     Make the body a flex column so edit-upload__content can fill its height. */
+  .edit-upload__dialog {
+    overflow: visible;
+
+    .dialog__body {
+      overflow: visible;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .edit-upload__content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-height: 480px;
+    gap: 0;
   }
 
-  .edit-upload__header {
-    border-bottom: 1px solid var(--color-border);
-    padding: var(--spacer-2-5);
+  /* Canvas area — must have a definite height for max-height: 100% to resolve on focal-wrapper */
+  .edit-upload__crop {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 100%;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: center;
+    padding: var(--spacer-4);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-small);
   }
 
-  .edit-upload__header h2 {
-    margin: 0;
-    text-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .edit-upload .ReactCrop__selection-addon,
+  .edit-upload__crop-window {
+    height: 100%;
+    width: 100%;
   }
 
-  [dir='rtl'] .edit-upload__actions {
-    margin-right: auto;
-    margin-left: unset;
+  .edit-upload__focal-wrapper {
+    position: relative;
+    display: inline-flex;
+    max-height: 100%;
+    max-width: 100%;
   }
 
-  .edit-upload__actions {
-    min-width: 350px;
-    margin-left: auto;
-    padding: var(--spacer-2) 0 var(--spacer-2) var(--spacer-4);
-    justify-content: flex-end;
+  /* Sidebar */
+  .edit-upload__sidebar {
+    flex-shrink: 0;
+    width: 240px;
+    border-left: 1px solid var(--color-border);
     display: flex;
-    gap: var(--spacer-3);
-    text-wrap: nowrap;
+    flex-direction: column;
+    margin-inline-start: var(--spacer-3);
+    padding-inline-start: var(--spacer-3);
   }
 
-  .edit-upload__toolWrap {
+  .edit-upload__section {
     display: flex;
-    justify-content: flex-end;
-    flex: 1;
-    min-height: 0;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    padding-block: var(--spacer-3);
   }
 
-  .edit-upload .ReactCrop__selection-addon,
-  .edit-upload__crop-window {
-    height: 100%;
-    width: 100%;
+  .edit-upload__section + .edit-upload__section {
+    border-top: 1px solid var(--color-border);
   }
 
-  .edit-upload__focal-wrapper {
-    position: relative;
-    display: inline-flex;
-    max-height: 100%;
+  .edit-upload__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
-  .edit-upload__draggable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    pointer-events: none;
+  .edit-upload__section-title {
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
   }
 
-  .edit-upload__draggable-container--dragging {
-    pointer-events: all;
+  .edit-upload__reset {
+    height: fit-content;
+    padding: 0 var(--spacer-2);
+  }
+
+  .edit-upload__fieldset {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-2);
   }
 
-  .edit-upload__draggable-container--dragging .edit-upload__focalPoint {
-    cursor: grabbing;
+  .edit-upload__field {
+    margin-bottom: 0;
+  }
+
+  .edit-upload__suffix {
+    font-size: var(--text-body-medium-font-size);
+    color: var(--color-text-secondary);
+    padding-inline-start: var(--spacer-1);
+  }
+
+  /* Draggable focal point */
+  .edit-upload__draggable-container {
+    position: absolute;
+    inset: 0;
+    pointer-events: none; /* let clicks pass through to the image/crop layer */
   }
 
   .edit-upload__draggable {
     position: absolute;
+    pointer-events: all; /* only the handle itself is interactive */
   }
 
   .edit-upload__focalPoint {
@@ -94,10 +131,7 @@
 
   .edit-upload__focalPoint svg {
     position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 100%;
     width: var(--spacer-6);
@@ -105,122 +139,23 @@
     color: white;
   }
 
-  .edit-upload__crop,
-  .edit-upload__focalOnly {
-    padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  .edit-upload__crop {
-    padding: var(--edit-upload-cell-spacing);
-    padding-left: var(--gutter-h);
-    display: flex;
-    align-items: flex-start;
-    height: 100%;
-  }
-
-  .edit-upload__imageWrap {
-    position: relative;
-  }
-
-  .edit-upload__point {
-    cursor: move;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
-  }
-
-  .edit-upload__point svg {
-    width: var(--spacer-6);
-    height: var(--spacer-6);
-  }
-
-  .edit-upload__sidebar {
-    border-left: 1px solid var(--color-border);
-    padding-top: var(--edit-upload-cell-spacing);
-    min-width: var(--edit-upload-sidebar-width);
-  }
-
-  .edit-upload__sidebar > div:first-child {
-    margin-bottom: var(--spacer-3);
-  }
-
-  .edit-upload__groupWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2);
-    padding-right: var(--gutter-h);
-    padding-left: var(--edit-upload-cell-spacing);
-    width: 100%;
-  }
-
-  .edit-upload__groupWrap + .edit-upload__groupWrap {
-    padding-top: var(--edit-upload-cell-spacing);
-    margin-top: var(--edit-upload-cell-spacing);
-    border-top: 1px solid var(--color-border);
-  }
-
-  .edit-upload__inputsWrap,
-  .edit-upload__titleWrap {
-    display: flex;
-    gap: var(--spacer-3);
-  }
-
-  .edit-upload__titleWrap {
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .edit-upload__titleWrap h3 {
-    margin: 0;
-  }
-
-  .edit-upload__reset {
-    height: fit-content;
-    border-radius: var(--radius-small);
-    background-color: var(--color-bg-secondary);
-    padding: 0 var(--spacer-2);
-  }
-
-  .edit-upload__input {
-    flex: 1;
-  }
-
-  @media (max-width: 1024px) {
-    .edit-upload {
-      --edit-upload-cell-spacing: var(--gutter-h);
-    }
-
-    .edit-upload__sidebar {
-      padding-left: 0;
-      border-left: 0;
-      width: 100%;
-    }
-
-    .edit-upload__toolWrap {
-      flex-direction: column-reverse;
-    }
-  }
-
   @media (max-width: 768px) {
-    .edit-upload {
+    .edit-upload__content {
       flex-direction: column;
+      min-height: unset;
     }
 
-    .edit-upload__focalPoint {
-      border-right: none;
-      padding: var(--spacer-3) 0;
+    .edit-upload__sidebar {
+      width: 100%;
+      border-left: none;
+      border-top: 1px solid var(--color-border);
+      margin-inline-start: 0;
+      padding-inline-start: 0;
+      padding-top: var(--spacer-3);
     }
 
-    .edit-upload__inputsWrap {
+    .edit-upload__fieldset {
       flex-direction: column;
-      gap: var(--spacer-3);
-    }
-
-    .edit-upload__sidebar {
-      min-width: 0;
     }
   }
 }
diff --git a/packages/ui/src/elements/EditUpload/index.tsx b/packages/ui/src/elements/EditUpload/index.tsx
index f3180f8827f..01837d8c536 100644
--- a/packages/ui/src/elements/EditUpload/index.tsx
+++ b/packages/ui/src/elements/EditUpload/index.tsx
@@ -7,40 +7,17 @@ import React, { useRef, useState } from 'react'
 import ReactCrop from 'react-image-crop'
 
 import { editDrawerSlug } from '../../elements/Upload/index.js'
+import { NumberInput } from '../../fields/Number/Input.js'
 import { PlusIcon } from '../../icons/Plus/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { appendCacheTag } from '../../utilities/appendCacheTag.js'
 import { Button } from '../Button/index.js'
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'
 import './index.css'
+import './library.scss'
 
 const baseClass = 'edit-upload'
 
-type Props = {
-  disabled?: boolean
-  name: string
-  onChange: (value: string) => void
-  ref?: React.RefObject<HTMLInputElement>
-  value: string
-}
-
-const Input: React.FC<Props> = (props) => {
-  const { name, disabled, onChange, ref, value } = props
-
-  return (
-    <div className={`${baseClass}__input`}>
-      {name}
-      <input
-        disabled={disabled}
-        name={name}
-        onChange={(e) => onChange(e.target.value)}
-        ref={ref}
-        type="number"
-        value={value}
-      />
-    </div>
-  )
-}
-
 type FocalPosition = {
   x: number
   y: number
@@ -49,7 +26,7 @@ type FocalPosition = {
 export type EditUploadProps = {
   fileName: string
   fileSrc: string
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   initialCrop?: UploadEdits['crop']
   initialFocalPoint?: FocalPosition
   onSave?: (uploadEdits: UploadEdits) => void
@@ -83,10 +60,7 @@ export const EditUpload: React.FC<EditUploadProps> = ({
     ...(initialCrop || {}),
   }))
 
-  const defaultFocalPosition: FocalPosition = {
-    x: 50,
-    y: 50,
-  }
+  const defaultFocalPosition: FocalPosition = { x: 50, y: 50 }
 
   const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({
     ...defaultFocalPosition,
@@ -101,13 +75,9 @@ export const EditUpload: React.FC<EditUploadProps> = ({
   const imageRef = useRef<HTMLImageElement | undefined>(undefined)
   const cropRef = useRef<HTMLDivElement | undefined>(undefined)
 
-  const heightInputRef = useRef<HTMLInputElement | null>(null)
-  const widthInputRef = useRef<HTMLInputElement | null>(null)
-
   const [imageLoaded, setImageLoaded] = useState<boolean>(false)
 
   const onImageLoad = (e) => {
-    // set the default image height/width on load
     setUncroppedPixelHeight(e.currentTarget.naturalHeight)
     setUncroppedPixelWidth(e.currentTarget.naturalWidth)
     setImageLoaded(true)
@@ -115,18 +85,12 @@ export const EditUpload: React.FC<EditUploadProps> = ({
 
   const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {
     const intValue = parseInt(value)
-
     const percentage =
       100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))
-
     if (percentage <= 0 || percentage > 100) {
       return null
     }
-
-    setCrop((prev) => ({
-      ...prev,
-      [dimension]: percentage,
-    }))
+    setCrop((prev) => ({ ...prev, [dimension]: percentage }))
   }
 
   const fineTuneFocalPosition = ({
@@ -147,8 +111,8 @@ export const EditUpload: React.FC<EditUploadProps> = ({
       onSave({
         crop: crop ? crop : undefined,
         focalPoint: focalPosition,
-        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
-        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),
+        heightInPixels: Math.round((crop.height / 100) * uncroppedPixelHeight),
+        widthInPixels: Math.round((crop.width / 100) * uncroppedPixelWidth),
       })
     }
     closeModal(editDrawerSlug)
@@ -160,145 +124,122 @@ export const EditUpload: React.FC<EditUploadProps> = ({
   }, [])
 
   const centerFocalPoint = () => {
-    const containerRect = focalWrapRef.current.getBoundingClientRect()
-    const boundsRect = showCrop
-      ? cropRef.current.getBoundingClientRect()
-      : imageRef.current.getBoundingClientRect()
-    const xCenter =
-      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100
-    const yCenter =
-      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100
-    setFocalPosition({ x: xCenter, y: yCenter })
+    setFocalPosition({ x: 50, y: 50 })
   }
 
-  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : fileSrc
+  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined
+
+  const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)
+  const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)
 
   return (
-    <div className={baseClass}>
-      <div className={`${baseClass}__header`}>
-        <h2 title={`${t('general:editing')} ${fileName}`}>
-          {t('general:editing')} {fileName}
-        </h2>
-        <div className={`${baseClass}__actions`}>
-          <Button
-            aria-label={t('general:cancel')}
-            buttonStyle="secondary"
-            className={`${baseClass}__cancel`}
-            onClick={() => closeModal(editDrawerSlug)}
-          >
-            {t('general:cancel')}
-          </Button>
-          <Button
-            aria-label={t('general:applyChanges')}
-            buttonStyle="primary"
-            className={`${baseClass}__save`}
-            disabled={!imageLoaded}
-            onClick={saveEdits}
-          >
-            {t('general:applyChanges')}
-          </Button>
-        </div>
-      </div>
-      <div className={`${baseClass}__toolWrap`}>
-        <div className={`${baseClass}__crop`}>
-          <div
-            className={`${baseClass}__focal-wrapper`}
-            ref={focalWrapRef}
-            style={{
-              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,
-            }}
-          >
-            {showCrop ? (
-              <ReactCrop
-                className={`${baseClass}__reactCrop`}
-                crop={crop}
-                onChange={(_, c) => setCrop(c)}
-                onComplete={() => setCheckBounds(true)}
-                renderSelectionAddon={() => {
-                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />
-                }}
-              >
+    <DialogModal
+      className={`${baseClass}__dialog`}
+      closeOnBlur={false}
+      size="large"
+      slug={editDrawerSlug}
+    >
+      <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />
+      <DialogBody>
+        <div className={`${baseClass}__content`}>
+          {/* Canvas area */}
+          <div className={`${baseClass}__crop`}>
+            <div
+              className={`${baseClass}__focal-wrapper`}
+              ref={focalWrapRef}
+              style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}
+            >
+              {showCrop ? (
+                <ReactCrop
+                  className={`${baseClass}__reactCrop`}
+                  crop={crop}
+                  onChange={(_, c) => setCrop(c)}
+                  onComplete={() => setCheckBounds(true)}
+                  renderSelectionAddon={() => (
+                    <div className={`${baseClass}__crop-window`} ref={cropRef} />
+                  )}
+                >
+                  <img
+                    alt={t('upload:setCropArea')}
+                    onLoad={onImageLoad}
+                    ref={imageRef}
+                    src={fileSrcToUse}
+                  />
+                </ReactCrop>
+              ) : (
                 <img
-                  alt={t('upload:setCropArea')}
+                  alt={t('upload:setFocalPoint')}
                   onLoad={onImageLoad}
                   ref={imageRef}
                   src={fileSrcToUse}
                 />
-              </ReactCrop>
-            ) : (
-              <img
-                alt={t('upload:setFocalPoint')}
-                onLoad={onImageLoad}
-                ref={imageRef}
-                src={fileSrcToUse}
-              />
-            )}
-            {showFocalPoint && (
-              <DraggableElement
-                boundsRef={showCrop ? cropRef : imageRef}
-                checkBounds={showCrop ? checkBounds : false}
-                className={`${baseClass}__focalPoint`}
-                containerRef={focalWrapRef}
-                initialPosition={focalPosition}
-                onDragEnd={onDragEnd}
-                setCheckBounds={showCrop ? setCheckBounds : false}
-              >
-                <PlusIcon />
-              </DraggableElement>
-            )}
+              )}
+              {showFocalPoint && (
+                <DraggableElement
+                  boundsRef={showCrop ? cropRef : imageRef}
+                  checkBounds={showCrop ? checkBounds : false}
+                  className={`${baseClass}__focalPoint`}
+                  containerRef={focalWrapRef}
+                  initialPosition={focalPosition}
+                  onDragEnd={onDragEnd}
+                  setCheckBounds={showCrop ? setCheckBounds : false}
+                >
+                  <PlusIcon />
+                </DraggableElement>
+              )}
+            </div>
           </div>
-        </div>
-        {(showCrop || showFocalPoint) && (
-          <div className={`${baseClass}__sidebar`}>
-            {showCrop && (
-              <div className={`${baseClass}__groupWrap`}>
-                <div>
-                  <div className={`${baseClass}__titleWrap`}>
-                    <h3>{t('upload:crop')}</h3>
+
+          {/* Sidebar */}
+          {(showCrop || showFocalPoint) && (
+            <div className={`${baseClass}__sidebar`}>
+              {showCrop && (
+                <div className={`${baseClass}__section`}>
+                  <div className={`${baseClass}__section-header`}>
+                    <span className={`${baseClass}__section-title`}>{t('upload:crop')}</span>
                     <Button
                       buttonStyle="ghost"
                       className={`${baseClass}__reset`}
-                      onClick={() =>
-                        setCrop({
-                          height: 100,
-                          unit: '%',
-                          width: 100,
-                          x: 0,
-                          y: 0,
-                        })
-                      }
+                      onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}
                     >
                       {t('general:reset')}
                     </Button>
                   </div>
+                  <div className={`${baseClass}__fieldset`}>
+                    <NumberInput
+                      className={`${baseClass}__field`}
+                      label="W"
+                      onChange={(e) =>
+                        fineTuneCrop({
+                          dimension: 'width',
+                          value: (e as React.ChangeEvent<HTMLInputElement>).target.value,
+                        })
+                      }
+                      path="cropWidth"
+                      readOnly={!imageLoaded}
+                      value={Number(cropWidthPx)}
+                    />
+                    <NumberInput
+                      className={`${baseClass}__field`}
+                      label="H"
+                      onChange={(e) =>
+                        fineTuneCrop({
+                          dimension: 'height',
+                          value: (e as React.ChangeEvent<HTMLInputElement>).target.value,
+                        })
+                      }
+                      path="cropHeight"
+                      readOnly={!imageLoaded}
+                      value={Number(cropHeightPx)}
+                    />
+                  </div>
                 </div>
-                <span className={`${baseClass}__description`}>
-                  {t('upload:cropToolDescription')}
-                </span>
-                <div className={`${baseClass}__inputsWrap`}>
-                  <Input
-                    disabled={!imageLoaded}
-                    name={`${t('upload:width')} (px)`}
-                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}
-                    ref={widthInputRef}
-                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}
-                  />
-                  <Input
-                    disabled={!imageLoaded}
-                    name={`${t('upload:height')} (px)`}
-                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}
-                    ref={heightInputRef}
-                    value={((crop.height / 100) * uncroppedPixelHeight).toFixed(0)}
-                  />
-                </div>
-              </div>
-            )}
-
-            {showFocalPoint && (
-              <div className={`${baseClass}__groupWrap`}>
-                <div>
-                  <div className={`${baseClass}__titleWrap`}>
-                    <h3>{t('upload:focalPoint')}</h3>
+              )}
+
+              {showFocalPoint && (
+                <div className={`${baseClass}__section`}>
+                  <div className={`${baseClass}__section-header`}>
+                    <span className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</span>
                     <Button
                       buttonStyle="ghost"
                       className={`${baseClass}__reset`}
@@ -307,28 +248,62 @@ export const EditUpload: React.FC<EditUploadProps> = ({
                       {t('general:reset')}
                     </Button>
                   </div>
+                  <div className={`${baseClass}__fieldset`}>
+                    <NumberInput
+                      AfterInput={<span className={`${baseClass}__suffix`}>%</span>}
+                      className={`${baseClass}__field`}
+                      label="X"
+                      max={100}
+                      min={0}
+                      onChange={(e) =>
+                        fineTuneFocalPosition({
+                          coordinate: 'x',
+                          value: (e as React.ChangeEvent<HTMLInputElement>).target.value,
+                        })
+                      }
+                      path="focalX"
+                      value={Math.round(focalPosition.x)}
+                    />
+                    <NumberInput
+                      AfterInput={<span className={`${baseClass}__suffix`}>%</span>}
+                      className={`${baseClass}__field`}
+                      label="Y"
+                      max={100}
+                      min={0}
+                      onChange={(e) =>
+                        fineTuneFocalPosition({
+                          coordinate: 'y',
+                          value: (e as React.ChangeEvent<HTMLInputElement>).target.value,
+                        })
+                      }
+                      path="focalY"
+                      value={Math.round(focalPosition.y)}
+                    />
+                  </div>
                 </div>
-                <span className={`${baseClass}__description`}>
-                  {t('upload:focalPointDescription')}
-                </span>
-                <div className={`${baseClass}__inputsWrap`}>
-                  <Input
-                    name="X %"
-                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}
-                    value={focalPosition.x.toFixed(0)}
-                  />
-                  <Input
-                    name="Y %"
-                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}
-                    value={focalPosition.y.toFixed(0)}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
+              )}
+            </div>
+          )}
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button
+          aria-label={t('general:cancel')}
+          buttonStyle="secondary"
+          onClick={() => closeModal(editDrawerSlug)}
+        >
+          {t('general:cancel')}
+        </Button>
+        <Button
+          aria-label={t('general:applyChanges')}
+          buttonStyle="primary"
+          disabled={!imageLoaded}
+          onClick={saveEdits}
+        >
+          {t('general:applyChanges')}
+        </Button>
+      </DialogFooter>
+    </DialogModal>
   )
 }
 
@@ -345,52 +320,18 @@ const DraggableElement = ({
   const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })
   const [isDragging, setIsDragging] = useState(false)
   const dragRef = useRef<HTMLButtonElement | undefined>(undefined)
+  // Keep a ref to the latest position so global mouseup handler can read it without a stale closure
+  const positionRef = useRef(position)
+  positionRef.current = position
 
   const getCoordinates = React.useCallback(
-    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {
+    (mouseX: number, mouseY: number) => {
       const containerRect = containerRef.current.getBoundingClientRect()
-      const boundsRect = boundsRef.current.getBoundingClientRect()
-      const mouseX = mouseXArg ?? boundsRect.left
-      const mouseY = mouseYArg ?? boundsRect.top
-
-      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right
-      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom
-
-      let x = ((mouseX - containerRect.left) / containerRect.width) * 100
-      let y = ((mouseY - containerRect.top) / containerRect.height) * 100
-      const xCenter =
-        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100
-      const yCenter =
-        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100
-      if (xOutOfBounds || yOutOfBounds) {
-        setIsDragging(false)
-        if (mouseX < boundsRect.left) {
-          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100
-        } else if (mouseX > boundsRect.right) {
-          x =
-            ((containerRect.width - (containerRect.right - boundsRect.right)) /
-              containerRect.width) *
-            100
-        }
-
-        if (mouseY < boundsRect.top) {
-          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100
-        } else if (mouseY > boundsRect.bottom) {
-          y =
-            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /
-              containerRect.height) *
-            100
-        }
-
-        if (recenter) {
-          x = xOutOfBounds ? xCenter : x
-          y = yOutOfBounds ? yCenter : y
-        }
-      }
-
-      return { x, y }
+      const x = ((mouseX - containerRect.left) / containerRect.width) * 100
+      const y = ((mouseY - containerRect.top) / containerRect.height) * 100
+      return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }
     },
-    [boundsRef, containerRef],
+    [containerRef],
   )
 
   const handleMouseDown = (event) => {
@@ -398,59 +339,62 @@ const DraggableElement = ({
     setIsDragging(true)
   }
 
-  const handleMouseMove = (event) => {
+  // Attach global listeners while dragging — this ensures events fire even when
+  // the cursor leaves the focal wrapper area during a fast drag
+  React.useEffect(() => {
     if (!isDragging) {
-      return null
+      return
     }
-    const { x, y } = getCoordinates(event.clientX, event.clientY)
 
-    setPosition({ x, y })
-  }
+    const handleMove = (e: MouseEvent) => {
+      if (!containerRef.current) {
+        return
+      }
+      const { x, y } = getCoordinates(e.clientX, e.clientY)
+      setPosition({ x, y })
+    }
 
-  const onDrop = () => {
-    setIsDragging(false)
-    onDragEnd(position)
-  }
+    const handleUp = () => {
+      setIsDragging(false)
+      onDragEnd(positionRef.current)
+    }
 
-  React.useEffect(() => {
-    if (isDragging || !dragRef.current) {
-      return
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleUp)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleUp)
     }
-    if (checkBounds) {
-      const { height, left, top, width } = dragRef.current.getBoundingClientRect()
-      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)
-      onDragEnd({ x, y })
-      setPosition({ x, y })
-      setCheckBounds(false)
+  }, [isDragging, getCoordinates, onDragEnd, containerRef])
+
+  // Re-check position when crop changes (the crop window may have moved)
+  React.useEffect(() => {
+    if (isDragging || !checkBounds || !dragRef.current) {
       return
     }
-  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])
+    const { height, left, top, width } = dragRef.current.getBoundingClientRect()
+    const { x, y } = getCoordinates(left + width / 2, top + height / 2)
+    onDragEnd({ x, y })
+    setPosition({ x, y })
+    setCheckBounds(false)
+  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])
 
   React.useEffect(() => {
     setPosition({ x: initialPosition.x, y: initialPosition.y })
   }, [initialPosition.x, initialPosition.y])
 
   return (
-    <div
-      className={[
-        `${baseClass}__draggable-container`,
-        isDragging && `${baseClass}__draggable-container--dragging`,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      onMouseMove={handleMouseMove}
-    >
+    <div className={`${baseClass}__draggable-container`}>
       <button
         className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}
         onMouseDown={handleMouseDown}
-        onMouseUp={onDrop}
         ref={dragRef}
         style={{ left: `${position.x}%`, top: `${position.y}%` }}
         type="button"
       >
         {children}
       </button>
-      <div />
     </div>
   )
 }
diff --git a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.tsx b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.tsx
index 76aa0d5d21f..b4e2d853f40 100644
--- a/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.tsx
+++ b/packages/ui/src/elements/FileDetails/DraggableFileDetails/index.tsx
@@ -24,7 +24,7 @@ export type DraggableFileDetailsProps = {
   hasImageSizes?: boolean
   hasMany: boolean
   hideRemoveFile?: boolean
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   isSortable?: boolean
   removeItem?: (index: number) => void
   rowIndex: number
diff --git a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
index f53e9b3a371..ba5e1c7ff73 100644
--- a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
+++ b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
@@ -20,7 +20,7 @@ export type StaticFileDetailsProps = {
   handleRemove?: () => void
   hasImageSizes?: boolean
   hideRemoveFile?: boolean
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   uploadConfig: SanitizedCollectionConfig['upload']
 }
 
diff --git a/packages/ui/src/elements/FileDetails/index.tsx b/packages/ui/src/elements/FileDetails/index.tsx
index fcbdc61ef79..9e9df479c93 100644
--- a/packages/ui/src/elements/FileDetails/index.tsx
+++ b/packages/ui/src/elements/FileDetails/index.tsx
@@ -15,7 +15,7 @@ type SharedFileDetailsProps = {
   enableAdjustments?: boolean
   hasImageSizes?: boolean
   hideRemoveFile?: boolean
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   uploadConfig: SanitizedCollectionConfig['upload']
 }
 
diff --git a/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.css b/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.css
new file mode 100644
index 00000000000..a767319b78f
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.css
@@ -0,0 +1,6 @@
+@layer payload-default {
+  .audio-preview {
+    width: 100%;
+    max-width: 480px;
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.tsx b/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.tsx
new file mode 100644
index 00000000000..7d61b5c94a9
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/AudioPreview/index.tsx
@@ -0,0 +1,17 @@
+'use client'
+import React from 'react'
+
+import './index.css'
+
+const baseClass = 'audio-preview'
+
+/**
+ * Built-in preview for native audio files, rendered inside the file manager when the
+ * uploaded file's mime type is `audio/*` and no custom file preview is provided.
+ */
+export const AudioPreview: React.FC<{ fileSrc: string }> = ({ fileSrc }) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown
+    <audio className={baseClass} controls src={fileSrc} />
+  )
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.css b/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.css
new file mode 100644
index 00000000000..5afa654cfee
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.css
@@ -0,0 +1,9 @@
+@layer payload-default {
+  .pdf-preview {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: var(--radius-small);
+    background: var(--color-bg);
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.tsx b/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.tsx
new file mode 100644
index 00000000000..260196b49cc
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/PdfPreview/index.tsx
@@ -0,0 +1,15 @@
+'use client'
+import React from 'react'
+
+import './index.css'
+
+const baseClass = 'pdf-preview'
+
+/**
+ * Built-in preview for PDF files, rendered inside the file manager when the uploaded file's
+ * mime type is `application/pdf` and no custom file preview is provided. Uses the browser's
+ * native PDF viewer via an iframe.
+ */
+export const PdfPreview: React.FC<{ fileSrc: string; title?: string }> = ({ fileSrc, title }) => {
+  return <iframe className={baseClass} src={fileSrc} title={title ?? 'PDF preview'} />
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.css b/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.css
new file mode 100644
index 00000000000..6df379fe1f5
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.css
@@ -0,0 +1,8 @@
+@layer payload-default {
+  .video-preview {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--radius-small);
+    background: var(--color-bg);
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.tsx b/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.tsx
new file mode 100644
index 00000000000..b414178b64c
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/VideoPreview/index.tsx
@@ -0,0 +1,17 @@
+'use client'
+import React from 'react'
+
+import './index.css'
+
+const baseClass = 'video-preview'
+
+/**
+ * Built-in preview for native video files, rendered inside the file manager when the
+ * uploaded file's mime type is `video/*` and no custom file preview is provided.
+ */
+export const VideoPreview: React.FC<{ fileSrc: string }> = ({ fileSrc }) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown
+    <video className={baseClass} controls src={fileSrc} />
+  )
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/index.css b/packages/ui/src/elements/FileManager/FilePreview/index.css
new file mode 100644
index 00000000000..fba82580ef1
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/index.css
@@ -0,0 +1,80 @@
+@layer payload-default {
+  .file-preview {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    /* Visible so the mini carousel can grow past the panel as the headers scroll away. */
+    overflow: visible;
+  }
+
+  .file-preview__main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-3) var(--spacer-4);
+    gap: var(--spacer-3);
+    overflow: hidden;
+  }
+
+  .file-preview__image-wrap {
+    flex: 1 0 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+
+      img,
+      svg {
+        object-fit: scale-down;
+      }
+    }
+  }
+
+  .file-preview__info {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .file-preview__info-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--spacer-2);
+    border-radius: var(--radius-small);
+    background: var(--color-bg-secondary-hover);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .file-preview__info-meta {
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  @container edit-main (max-width: 768px) {
+    .file-preview {
+      flex-direction: column-reverse;
+    }
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/FilePreview/index.tsx b/packages/ui/src/elements/FileManager/FilePreview/index.tsx
new file mode 100644
index 00000000000..6a954ab0bc1
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FilePreview/index.tsx
@@ -0,0 +1,115 @@
+'use client'
+import { formatFilesize, isImage } from 'payload/shared'
+import React from 'react'
+
+import type { FileManagerProps } from '../index.js'
+
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { appendCacheTag } from '../../../utilities/appendCacheTag.js'
+import { MiniCarousel } from '../../MiniCarousel/index.js'
+import { Thumbnail } from '../../Thumbnail/index.js'
+import { AudioPreview } from './AudioPreview/index.js'
+import { PdfPreview } from './PdfPreview/index.js'
+import { VideoPreview } from './VideoPreview/index.js'
+import './index.css'
+
+const baseClass = 'file-preview'
+
+type Props = {
+  readonly data: Record<string, unknown>
+  readonly imageCacheTag?: false | string
+  readonly selectedSize?: null | string
+  readonly selectedSizeData?: null | Record<string, unknown>
+  readonly setSelectedSize: (size: null | string) => void
+} & Pick<FileManagerProps, 'collectionSlug' | 'uploadConfig' | 'UploadFilePreview'>
+
+export const FilePreview: React.FC<Props> = ({
+  collectionSlug,
+  data,
+  imageCacheTag,
+  selectedSize,
+  selectedSizeData,
+  setSelectedSize,
+  uploadConfig,
+  UploadFilePreview,
+}) => {
+  const { t } = useTranslation()
+
+  const hasImageSizes = uploadConfig?.imageSizes?.length > 0
+  const mimeType = (data?.mimeType as string) ?? ''
+  const isImageFile = isImage(mimeType)
+  const fileSrc = (selectedSizeData?.url ?? data?.thumbnailURL ?? data?.url ?? null) as
+    | null
+    | string
+
+  const originalUrl = data?.url as string | undefined
+  const nativePreviewSrc = originalUrl ? appendCacheTag(originalUrl, imageCacheTag) : undefined
+
+  // Built-in previews for native file types; images (and unknown types) fall back to the thumbnail.
+  const renderBuiltInPreview = () => {
+    if (nativePreviewSrc && !isImageFile) {
+      if (mimeType.startsWith('video/')) {
+        return <VideoPreview fileSrc={nativePreviewSrc} />
+      }
+      if (mimeType.startsWith('audio/')) {
+        return <AudioPreview fileSrc={nativePreviewSrc} />
+      }
+      if (mimeType === 'application/pdf') {
+        return <PdfPreview fileSrc={nativePreviewSrc} title={data?.filename as string} />
+      }
+    }
+
+    return (
+      <Thumbnail
+        className={`${baseClass}__thumbnail`}
+        collectionSlug={collectionSlug}
+        doc={selectedSizeData || data}
+        fileSrc={fileSrc}
+        imageCacheTag={imageCacheTag}
+        size="expand"
+        uploadConfig={uploadConfig}
+      />
+    )
+  }
+
+  const metaString = (() => {
+    const w = (selectedSizeData?.width ?? data?.width) as number | undefined
+    const h = (selectedSizeData?.height ?? data?.height) as number | undefined
+    const parts: string[] = []
+    if (typeof w === 'number' && typeof h === 'number') {
+      parts.push(`${w} × ${h}`)
+    }
+    parts.push(
+      formatFilesize(((selectedSizeData?.filesize ?? (data?.filesize as number)) || 0) as number),
+    )
+    if (data?.mimeType) {
+      parts.push(data.mimeType as string)
+    }
+    return parts.join(' – ')
+  })()
+
+  return (
+    <div className={baseClass}>
+      {hasImageSizes && isImageFile && (
+        <MiniCarousel
+          doc={data}
+          imageCacheTag={imageCacheTag}
+          onSelect={setSelectedSize}
+          selectedSize={selectedSize}
+          uploadConfig={uploadConfig}
+        />
+      )}
+      <div className={`${baseClass}__main`}>
+        <div className={`${baseClass}__image-wrap`}>
+          {UploadFilePreview ?? renderBuiltInPreview()}
+        </div>
+        <div className={`${baseClass}__info`}>
+          <span className={`${baseClass}__info-label`}>
+            {selectedSize ?? t('general:original')}
+          </span>
+          <span className={`${baseClass}__info-meta`}>{metaString}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/elements/FileManager/FileToolbar/index.css b/packages/ui/src/elements/FileManager/FileToolbar/index.css
new file mode 100644
index 00000000000..7d401160141
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FileToolbar/index.css
@@ -0,0 +1,79 @@
+@layer payload-default {
+  .file-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    /* When the toolbar gets too narrow for the filename dropdown and the actions side by side,
+       wrap the actions below the dropdown instead of letting them overlap. */
+    flex-wrap: wrap;
+    row-gap: var(--spacer-2);
+    padding: var(--spacer-2) var(--spacer-4) var(--spacer-2) var(--spacer-2);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg);
+    flex-shrink: 0;
+  }
+
+  .file-toolbar__left {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+    /* Grow to fill on wide toolbars, but don't shrink — so when space runs out the actions
+       wrap below the dropdown instead of the dropdown collapsing. */
+    flex: 1 0 auto;
+  }
+
+  .file-toolbar__right {
+    display: flex;
+    gap: var(--spacer-1);
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .file-toolbar__filename-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1) var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--special-border-translucent);
+    cursor: pointer;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    max-width: 200px;
+
+    &:hover {
+      background: var(--color-bg-transparent-hover);
+    }
+
+    &:active {
+      background: var(--color-bg-transparent-pressed);
+    }
+  }
+
+  .file-toolbar__filename-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-toolbar__icon-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-medium);
+    color: var(--color-icon);
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-bg-transparent-hover);
+      color: var(--color-icon);
+    }
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/FileToolbar/index.tsx b/packages/ui/src/elements/FileManager/FileToolbar/index.tsx
new file mode 100644
index 00000000000..73db3825e93
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/FileToolbar/index.tsx
@@ -0,0 +1,95 @@
+'use client'
+import React from 'react'
+
+import { ChevronIcon } from '../../../icons/Chevron/index.js'
+import { CropIcon } from '../../../icons/Crop/index.js'
+import { DownloadIcon } from '../../../icons/Download/index.js'
+import { ExternalLinkIcon } from '../../../icons/ExternalLink/index.js'
+import { RefreshIcon } from '../../../icons/Refresh/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { Button } from '../../Button/index.js'
+import { Popup } from '../../Popup/index.js'
+import * as PopupList from '../../Popup/PopupButtonList/index.js'
+import './index.css'
+
+const baseClass = 'file-toolbar'
+
+type Props = {
+  readonly filename: string
+  readonly fileSrc?: null | string
+  readonly isAdjustable?: boolean
+  readonly onEditImage?: () => void
+  readonly onReplace?: () => void
+}
+
+export const FileToolbar: React.FC<Props> = ({
+  filename,
+  fileSrc,
+  isAdjustable,
+  onEditImage,
+  onReplace,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={baseClass}>
+      <div className={`${baseClass}__left`}>
+        <Popup
+          button={
+            <span className={`${baseClass}__filename-btn`}>
+              <span className={`${baseClass}__filename-text`}>{filename}</span>
+              <ChevronIcon size={16} />
+            </span>
+          }
+          buttonType="custom"
+          horizontalAlign="left"
+          size="small"
+          verticalAlign="bottom"
+        >
+          <PopupList.MenuItem>
+            <PopupList.Button icon={<RefreshIcon />} onClick={onReplace}>
+              {t('upload:replaceFile')}
+            </PopupList.Button>
+          </PopupList.MenuItem>
+        </Popup>
+      </div>
+
+      <div className={`${baseClass}__right`}>
+        {isAdjustable && (
+          <Button
+            aria-label={t('upload:editImage')}
+            buttonStyle="ghost"
+            icon={<CropIcon size={24} />}
+            margin={false}
+            onClick={onEditImage}
+            round={false}
+            tooltip={t('upload:editImage')}
+          />
+        )}
+        {fileSrc && (
+          <a
+            aria-label={t('fields:openInNewTab')}
+            className={`${baseClass}__icon-link`}
+            href={fileSrc}
+            rel="noopener noreferrer"
+            target="_blank"
+            title={t('fields:openInNewTab')}
+          >
+            <ExternalLinkIcon size={24} />
+          </a>
+        )}
+        {fileSrc && (
+          <a
+            aria-label={t('upload:download')}
+            className={`${baseClass}__icon-link`}
+            download={filename}
+            href={fileSrc}
+            title={t('upload:download')}
+          >
+            <DownloadIcon size={24} />
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/elements/FileManager/index.css b/packages/ui/src/elements/FileManager/index.css
new file mode 100644
index 00000000000..7282dc1c515
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/index.css
@@ -0,0 +1,147 @@
+@layer payload-default {
+  .file-manager {
+    --mini-carousel-width: 72px;
+    position: relative;
+    flex: 1 0 0;
+    align-self: stretch;
+    width: 100%;
+    min-height: max(
+      500px,
+      calc(100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height))
+    );
+    margin-bottom: 0;
+    border-radius: 0;
+    background: var(--color-bg-secondary);
+  }
+
+  .file-manager__panel {
+    position: sticky;
+    top: var(--doc-controls-height);
+    /* Fill the viewport below the app header, doc controls and doc header. */
+    height: max(
+      500px,
+      calc(100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height))
+    );
+    display: flex;
+    flex-direction: column;
+    /* Visible so the mini carousel can grow past the panel to fill the area left behind as the
+       app/doc headers scroll away (see MiniCarousel). */
+    overflow: visible;
+  }
+
+  .file-manager__content {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .file-manager__upload {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-4);
+    position: relative;
+  }
+
+  /* Fill the whole upload area so a file can be dropped onto any part of the file manager,
+     not just the band occupied by the dropzone's buttons. */
+  .file-manager__upload .dropzone {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .file-manager__remove {
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    margin: 0;
+    z-index: 1;
+  }
+
+  /* Preview of a freshly-selected (not-yet-saved) file. Capped so large media stays contained;
+     the definite height lets the PDF iframe / video / image fill it. */
+  .file-manager__selected-preview {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 420px;
+    height: min(50dvh, 320px);
+    overflow: hidden;
+    border-radius: var(--radius-small);
+  }
+
+  /* Audio is just a player bar — no tall box needed. */
+  .file-manager__selected-preview--audio {
+    height: auto;
+  }
+
+  .file-manager__selected-preview .thumbnail img,
+  .file-manager__selected-preview .thumbnail svg {
+    object-fit: contain;
+  }
+
+  .file-manager__file-adjustments {
+    padding: var(--spacer-3);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .file-manager__hidden-input {
+    display: none;
+  }
+
+  .file-manager__dropzone-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacer-2);
+    width: 100%;
+  }
+
+  .file-manager__dropzone-buttons {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+  }
+
+  .file-manager__or-text {
+    color: var(--color-text-tertiary);
+    text-transform: lowercase;
+  }
+
+  .file-manager__drag-text {
+    flex-shrink: 0;
+    margin: 0;
+    text-transform: lowercase;
+    color: var(--color-text-tertiary);
+  }
+
+  @container edit-main (max-width: 1024px) {
+    .file-manager {
+      min-height: 400px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .file-manager__panel {
+      position: static;
+      height: auto;
+      min-height: 400px;
+    }
+
+    .file-manager__content {
+      flex-direction: column;
+    }
+  }
+}
diff --git a/packages/ui/src/elements/FileManager/index.tsx b/packages/ui/src/elements/FileManager/index.tsx
new file mode 100644
index 00000000000..08ea9492957
--- /dev/null
+++ b/packages/ui/src/elements/FileManager/index.tsx
@@ -0,0 +1,442 @@
+'use client'
+import type { SanitizedCollectionConfig, UploadEdits } from 'payload'
+
+import { useModal } from '@faceless-ui/modal'
+import { formatAdminURL, isImage } from 'payload/shared'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
+
+import { FieldError } from '../../fields/FieldError/index.js'
+import { fieldBaseClass } from '../../fields/shared/index.js'
+import { TextInput } from '../../fields/Text/Input.js'
+import { useForm } from '../../forms/Form/index.js'
+import { useField } from '../../forms/useField/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { EditDepthProvider } from '../../providers/EditDepth/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { useUploadControls } from '../../providers/UploadControls/index.js'
+import { useUploadEdits } from '../../providers/UploadEdits/index.js'
+import { Button } from '../Button/index.js'
+import { Drawer } from '../Drawer/index.js'
+import { Dropzone } from '../Dropzone/index.js'
+import { EditUpload } from '../EditUpload/index.js'
+import { PreviewSizes } from '../PreviewSizes/index.js'
+import { Thumbnail } from '../Thumbnail/index.js'
+import { editDrawerSlug, sizePreviewSlug } from '../Upload/index.js'
+import { pasteURLDrawerSlug, UploadFromURLModal } from '../Upload/UploadFromURLModal/index.js'
+import './index.css'
+import { AudioPreview } from './FilePreview/AudioPreview/index.js'
+import { FilePreview } from './FilePreview/index.js'
+import { PdfPreview } from './FilePreview/PdfPreview/index.js'
+import { VideoPreview } from './FilePreview/VideoPreview/index.js'
+import { FileToolbar } from './FileToolbar/index.js'
+
+const baseClass = 'file-manager'
+
+const validate = (value) => {
+  if (!value && value !== undefined) {
+    return 'A file is required.'
+  }
+  if (value && (!value.name || value.name === '')) {
+    return 'A file name is required.'
+  }
+  return true
+}
+
+export type FileManagerProps = {
+  readonly collectionSlug: string
+  readonly initialState?: import('payload').FormState
+  readonly uploadConfig: SanitizedCollectionConfig['upload']
+  readonly UploadControls?: React.ReactNode
+  readonly UploadFilePreview?: React.ReactNode
+}
+
+export const FileManager: React.FC<FileManagerProps> = ({
+  collectionSlug,
+  initialState,
+  uploadConfig,
+  UploadControls,
+  UploadFilePreview,
+}) => {
+  const { closeModal, openModal } = useModal()
+  const { t } = useTranslation()
+  const { setModified } = useForm()
+  const { id, data, setUploadStatus } = useDocumentInfo()
+  const { errorMessage, setValue, showError, value } = useField<File>({
+    path: 'file',
+    validate,
+  })
+  const {
+    config: {
+      routes: { api },
+    },
+  } = useConfig()
+  const {
+    setUploadControlFile,
+    setUploadControlFileName,
+    setUploadControlFileUrl,
+    uploadControlFile,
+    uploadControlFileName,
+    uploadControlFileUrl,
+  } = useUploadControls()
+  const { resetUploadEdits, updateUploadEdits, uploadEdits } = useUploadEdits()
+
+  const [fileSrc, setFileSrc] = useState<null | string>(null)
+  const [removedFile, setRemovedFile] = useState(false)
+  const [filename, setFilename] = useState<string>(value?.name || '')
+  const [fileUrl, setFileUrl] = useState<string>('')
+  const [selectedSize, setSelectedSize] = useState<null | string>(null)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const useServerSideFetch =
+    typeof uploadConfig?.pasteURL === 'object' && uploadConfig.pasteURL.allowList?.length > 0
+
+  const acceptMimeTypes = uploadConfig.mimeTypes?.join(', ')
+  const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt
+
+  const hasImageSizes = uploadConfig?.imageSizes?.length > 0
+  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)
+  const focalPointEnabled = uploadConfig?.focalPoint === true
+  const { crop: showCrop = true, focalPoint = true } = uploadConfig
+  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)
+
+  const selectedSizeData = selectedSize
+    ? (data?.sizes?.[selectedSize] as Record<string, unknown>)
+    : null
+  const sidePanelFileSrc = (selectedSizeData?.url ?? data?.thumbnailURL ?? data?.url ?? null) as
+    | null
+    | string
+  const sidePanelMimeType = data?.mimeType as string | undefined
+  const fileTypeIsAdjustable =
+    !!sidePanelMimeType &&
+    isImage(sidePanelMimeType) &&
+    sidePanelMimeType !== 'image/svg+xml' &&
+    sidePanelMimeType !== 'image/jxl'
+
+  const renameFile = (fileToChange: File, newName: string): File =>
+    new File([fileToChange], newName, {
+      type: fileToChange.type,
+      lastModified: fileToChange.lastModified,
+    })
+
+  const handleFileChange = useCallback(
+    ({ file, isNewFile = true }: { file: File | null; isNewFile?: boolean }) => {
+      if (isNewFile && file instanceof File) {
+        setFileSrc(URL.createObjectURL(file))
+      }
+      setValue(file)
+      setUploadControlFileUrl('')
+      setUploadControlFileName(null)
+      setUploadControlFile(null)
+    },
+    [setValue, setUploadControlFile, setUploadControlFileName, setUploadControlFileUrl],
+  )
+
+  const handleFileNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const updatedFileName = e.target.value
+      if (value) {
+        handleFileChange({ file: renameFile(value, updatedFileName), isNewFile: false })
+        setFilename(updatedFileName)
+      }
+    },
+    [handleFileChange, value],
+  )
+
+  const handleFileRemoval = useCallback(() => {
+    setRemovedFile(true)
+    handleFileChange({ file: null })
+    setFileSrc('')
+    setFileUrl('')
+    resetUploadEdits()
+    setUploadControlFileUrl('')
+    setUploadControlFileName(null)
+    setUploadControlFile(null)
+  }, [
+    handleFileChange,
+    resetUploadEdits,
+    setUploadControlFile,
+    setUploadControlFileName,
+    setUploadControlFileUrl,
+  ])
+
+  const handleFileSelection = useCallback(
+    (files: FileList) => handleFileChange({ file: files?.[0] }),
+    [handleFileChange],
+  )
+
+  const isValidUrl = Boolean(fileUrl && URL.canParse(fileUrl))
+
+  const handleUrlSubmit = useCallback(async () => {
+    if (!fileUrl || !URL.canParse(fileUrl) || uploadConfig?.pasteURL === false) {
+      return
+    }
+    setUploadStatus('uploading')
+    try {
+      const clientResponse = await fetch(fileUrl)
+      if (!clientResponse.ok) {
+        throw new Error(`Fetch failed: ${clientResponse.status}`)
+      }
+      const blob = await clientResponse.blob()
+      const rawSegment = fileUrl.split('/').pop() || ''
+      const fileName = uploadControlFileName || decodeURIComponent(rawSegment.split('?')[0])
+      handleFileChange({ file: new File([blob], fileName, { type: blob.type }) })
+      setUploadStatus('idle')
+      closeModal(pasteURLDrawerSlug)
+      setFileUrl('')
+      return
+    } catch (_clientError) {
+      if (!useServerSideFetch) {
+        toast.error('Failed to fetch the file.')
+        setUploadStatus('failed')
+        return
+      }
+    }
+    try {
+      const pasteURL: `/${string}` = `/${collectionSlug}/paste-url${id ? `/${id}?` : '?'}src=${encodeURIComponent(fileUrl)}`
+      const serverResponse = await fetch(formatAdminURL({ apiRoute: api, path: pasteURL }))
+      if (!serverResponse.ok) {
+        throw new Error(`Fetch failed: ${serverResponse.status}`)
+      }
+      const blob = await serverResponse.blob()
+      const rawSegment = fileUrl.split('/').pop() || ''
+      const fileName = decodeURIComponent(rawSegment.split('?')[0])
+      handleFileChange({ file: new File([blob], fileName, { type: blob.type }) })
+      setUploadStatus('idle')
+      closeModal(pasteURLDrawerSlug)
+      setFileUrl('')
+    } catch (_serverError) {
+      toast.error('The provided URL is not allowed.')
+      setUploadStatus('failed')
+    }
+  }, [
+    api,
+    closeModal,
+    collectionSlug,
+    fileUrl,
+    handleFileChange,
+    id,
+    setUploadStatus,
+    uploadConfig,
+    uploadControlFileName,
+    useServerSideFetch,
+  ])
+
+  const onEditsSave = useCallback(
+    (args: UploadEdits) => {
+      setModified(true)
+      updateUploadEdits(args)
+    },
+    [setModified, updateUploadEdits],
+  )
+
+  useEffect(() => {
+    if (initialState?.file?.value instanceof File) {
+      setFileSrc(URL.createObjectURL(initialState.file.value))
+      setRemovedFile(false)
+    }
+  }, [initialState])
+
+  useEffect(() => {
+    const handleControlFileUrl = async () => {
+      if (uploadControlFileUrl) {
+        setFileUrl(uploadControlFileUrl)
+        await handleUrlSubmit()
+      }
+    }
+    void handleControlFileUrl()
+  }, [uploadControlFileUrl, handleUrlSubmit])
+
+  useEffect(() => {
+    if (uploadControlFile) {
+      handleFileChange({ file: uploadControlFile })
+    }
+  }, [uploadControlFile, handleFileChange])
+
+  // Preview a freshly-selected (not-yet-saved) file from its local object URL, so video/audio/PDF
+  // are playable/viewable just like images. Sizing is capped in CSS so large files stay contained.
+  const renderSelectedFilePreview = (src: string) => {
+    const fileType = value?.type ?? ''
+
+    if (fileType.startsWith('video/')) {
+      return (
+        <div className={`${baseClass}__selected-preview`}>
+          <VideoPreview fileSrc={src} />
+        </div>
+      )
+    }
+
+    if (fileType.startsWith('audio/')) {
+      return (
+        <div className={`${baseClass}__selected-preview ${baseClass}__selected-preview--audio`}>
+          <AudioPreview fileSrc={src} />
+        </div>
+      )
+    }
+
+    if (fileType === 'application/pdf') {
+      return (
+        <div className={`${baseClass}__selected-preview`}>
+          <PdfPreview fileSrc={src} title={value?.name} />
+        </div>
+      )
+    }
+
+    return (
+      <div className={`${baseClass}__selected-preview`}>
+        <Thumbnail
+          collectionSlug={collectionSlug}
+          fileSrc={isImage(fileType) ? src : null}
+          size="expand"
+        />
+      </div>
+    )
+  }
+
+  const drawers = (
+    <Fragment>
+      {(value || data?.filename) && (
+        <EditDepthProvider>
+          <EditUpload
+            fileName={value?.name || (data?.filename as string)}
+            fileSrc={(data?.url as string) || fileSrc}
+            imageCacheTag={imageCacheTag}
+            initialCrop={uploadEdits?.crop ?? undefined}
+            initialFocalPoint={{
+              x: uploadEdits?.focalPoint?.x || (data?.focalX as number) || 50,
+              y: uploadEdits?.focalPoint?.y || (data?.focalY as number) || 50,
+            }}
+            onSave={onEditsSave}
+            showCrop={showCrop}
+            showFocalPoint={showFocalPoint}
+          />
+        </EditDepthProvider>
+      )}
+      {data && hasImageSizes && (
+        <Drawer
+          className={`${baseClass}__preview-drawer`}
+          hoverTitle
+          slug={sizePreviewSlug}
+          title={t('upload:sizesFor', { label: data.filename })}
+        >
+          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig} />
+        </Drawer>
+      )}
+      {uploadConfig?.pasteURL !== false && (
+        <UploadFromURLModal
+          fileUrl={fileUrl}
+          handleUrlSubmit={handleUrlSubmit}
+          isValidUrl={isValidUrl}
+          setFileUrl={setFileUrl}
+        />
+      )}
+    </Fragment>
+  )
+
+  return (
+    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>
+      <FieldError message={errorMessage} showError={showError} />
+      <div className={`${baseClass}__panel`}>
+        {data?.filename && !removedFile && (
+          <FileToolbar
+            filename={data.filename as string}
+            fileSrc={sidePanelFileSrc}
+            isAdjustable={fileTypeIsAdjustable}
+            onEditImage={() => openModal(editDrawerSlug)}
+            onReplace={handleFileRemoval}
+          />
+        )}
+        <div className={`${baseClass}__content`}>
+          {data?.filename && !removedFile ? (
+            <FilePreview
+              collectionSlug={collectionSlug}
+              data={data as Record<string, unknown>}
+              imageCacheTag={imageCacheTag}
+              selectedSize={selectedSize}
+              selectedSizeData={selectedSizeData}
+              setSelectedSize={setSelectedSize}
+              uploadConfig={uploadConfig}
+              UploadFilePreview={UploadFilePreview}
+            />
+          ) : (
+            <div className={`${baseClass}__upload`}>
+              {!value && (
+                <Dropzone onChange={handleFileSelection}>
+                  <div className={`${baseClass}__dropzone-content`}>
+                    <div className={`${baseClass}__dropzone-buttons`}>
+                      <Button
+                        buttonStyle="secondary"
+                        onClick={() => inputRef.current?.click()}
+                        size="medium"
+                      >
+                        {t('upload:selectFile')}
+                      </Button>
+                      <input
+                        accept={acceptMimeTypes}
+                        aria-hidden="true"
+                        className={`${baseClass}__hidden-input`}
+                        hidden
+                        onChange={(e) => {
+                          if (e.target.files && e.target.files.length > 0) {
+                            handleFileSelection(e.target.files)
+                          }
+                        }}
+                        ref={inputRef}
+                        type="file"
+                      />
+                      {uploadConfig?.pasteURL !== false && (
+                        <Fragment>
+                          <span className={`${baseClass}__or-text`}>{t('general:or')}</span>
+                          <Button
+                            buttonStyle="secondary"
+                            onClick={() => {
+                              openModal(pasteURLDrawerSlug)
+                              setUploadControlFileUrl('')
+                              setUploadControlFile(null)
+                              setUploadControlFileName(null)
+                            }}
+                            size="medium"
+                          >
+                            {t('upload:pasteURL')}
+                          </Button>
+                        </Fragment>
+                      )}
+                      {UploadControls ?? null}
+                    </div>
+                    <p className={`${baseClass}__drag-text`}>
+                      {t('general:or')} {t('upload:dragAndDrop')}
+                    </p>
+                  </div>
+                </Dropzone>
+              )}
+              {value && fileSrc && (
+                <Fragment>
+                  <Button
+                    buttonStyle="ghost"
+                    className={`${baseClass}__remove`}
+                    icon="x"
+                    onClick={handleFileRemoval}
+                    round
+                    tooltip={t('general:cancel')}
+                  />
+                  {renderSelectedFilePreview(fileSrc)}
+                  <div className={`${baseClass}__file-adjustments`}>
+                    <TextInput
+                      label={t('upload:fileName')}
+                      onChange={handleFileNameChange}
+                      path="filename"
+                      value={filename || value.name}
+                    />
+                  </div>
+                </Fragment>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {drawers}
+    </div>
+  )
+}
diff --git a/packages/ui/src/elements/MiniCarousel/index.css b/packages/ui/src/elements/MiniCarousel/index.css
new file mode 100644
index 00000000000..04de9357e23
--- /dev/null
+++ b/packages/ui/src/elements/MiniCarousel/index.css
@@ -0,0 +1,99 @@
+@layer payload-default {
+  .mini-carousel {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-3);
+    padding: var(--spacer-2-5);
+    width: var(--mini-carousel-width, 72px);
+    height: 100%;
+    flex-shrink: 0;
+    overflow-y: auto;
+    background: var(--color-bg-secondary);
+    border-right: 1px solid var(--color-border);
+    /* Opt out of the flex line's stretch so the explicit (scroll-driven) height below is honored
+       and the carousel can grow past the panel instead of being clamped to the line height. */
+    align-self: flex-start;
+    /* The sticky panel fills the viewport below all the chrome. When the app header and doc
+       header scroll away, only the carousel grows to keep its bottom on the viewport edge —
+       the preview content stays put. Pure CSS via a scroll-driven timeline; where it isn't
+       supported the carousel just keeps its static height (the prior behavior). */
+    animation: mini-carousel-fill-scrolled-chrome linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
+  }
+
+  @keyframes mini-carousel-fill-scrolled-chrome {
+    to {
+      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
+    }
+  }
+
+  .mini-carousel__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    padding: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-secondary);
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .mini-carousel__item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .mini-carousel__item--active {
+    border-color: var(--color-border-selected);
+  }
+
+  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
+    border-color: var(--color-border-hover);
+  }
+
+  .mini-carousel__divider {
+    width: 100%;
+    height: 1px;
+    background: var(--color-border);
+    flex-shrink: 0;
+  }
+
+  /* Once the layout stacks (the panel is static, not sticky) there's no gap to fill, so disable
+     the scroll-driven growth and just fill the panel via stretch — otherwise the growing carousel
+     would overflow into the content below. */
+  @container edit-main (max-width: 1024px) {
+    .mini-carousel {
+      align-self: stretch;
+      height: auto;
+      animation: none;
+    }
+  }
+
+  @container edit-main (max-width: 768px) {
+    .mini-carousel {
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+      border-right: 0;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .mini-carousel__item {
+      width: 48px;
+    }
+
+    .mini-carousel__divider {
+      width: 1px;
+      height: 48px;
+      margin: 0 var(--spacer-2);
+    }
+  }
+}
diff --git a/packages/ui/src/elements/MiniCarousel/index.tsx b/packages/ui/src/elements/MiniCarousel/index.tsx
new file mode 100644
index 00000000000..37eaab01b4e
--- /dev/null
+++ b/packages/ui/src/elements/MiniCarousel/index.tsx
@@ -0,0 +1,108 @@
+'use client'
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'
+
+import React from 'react'
+
+import { appendCacheTag } from '../../utilities/appendCacheTag.js'
+import './index.css'
+
+const baseClass = 'mini-carousel'
+
+type MiniCarouselItemProps = {
+  active: boolean
+  imageCacheTag?: false | string
+  label: string
+  onClick: () => void
+  url: string
+}
+
+const MiniCarouselItem: React.FC<MiniCarouselItemProps> = ({
+  active,
+  imageCacheTag,
+  label,
+  onClick,
+  url,
+}) => {
+  const src = appendCacheTag(url, imageCacheTag)
+
+  return (
+    <button
+      aria-label={label}
+      aria-pressed={active}
+      className={[`${baseClass}__item`, active && `${baseClass}__item--active`]
+        .filter(Boolean)
+        .join(' ')}
+      onClick={onClick}
+      type="button"
+    >
+      <img alt={label} src={src} />
+    </button>
+  )
+}
+
+export type MiniCarouselProps = {
+  doc: {
+    sizes?: FileSizes
+    url?: string
+  } & Data
+  imageCacheTag?: false | string
+  onSelect: (sizeKey: null | string) => void
+  selectedSize: null | string
+  uploadConfig: SanitizedCollectionConfig['upload']
+}
+
+export const MiniCarousel: React.FC<MiniCarouselProps> = ({
+  doc,
+  imageCacheTag,
+  onSelect,
+  selectedSize,
+  uploadConfig,
+}) => {
+  const { imageSizes } = uploadConfig
+  const { sizes, url: originalUrl } = doc
+
+  const orderedSizeKeys = React.useMemo(() => {
+    if (!imageSizes || imageSizes.length === 0) {
+      return Object.keys(sizes || {})
+    }
+    return imageSizes.map(({ name }) => name).filter((name) => sizes?.[name]?.url)
+  }, [imageSizes, sizes])
+
+  if (!originalUrl) {
+    return null
+  }
+
+  return (
+    <div className={baseClass}>
+      <MiniCarouselItem
+        active={selectedSize === null}
+        imageCacheTag={imageCacheTag}
+        label="Original"
+        onClick={() => onSelect(null)}
+        url={originalUrl}
+      />
+
+      {orderedSizeKeys.length > 0 && (
+        <>
+          <div className={`${baseClass}__divider`} />
+          {orderedSizeKeys.map((key) => {
+            const sizeData = sizes?.[key]
+            if (!sizeData?.url) {
+              return null
+            }
+            return (
+              <MiniCarouselItem
+                active={selectedSize === key}
+                imageCacheTag={imageCacheTag}
+                key={key}
+                label={key}
+                onClick={() => onSelect(key)}
+                url={sizeData.url}
+              />
+            )
+          })}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/packages/ui/src/elements/PreviewSizes/index.tsx b/packages/ui/src/elements/PreviewSizes/index.tsx
index c5154c81328..e6a68eb45b6 100644
--- a/packages/ui/src/elements/PreviewSizes/index.tsx
+++ b/packages/ui/src/elements/PreviewSizes/index.tsx
@@ -80,7 +80,7 @@ export type PreviewSizesProps = {
   doc: {
     sizes?: FilesSizesWithUrl
   } & Data
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   uploadConfig: SanitizedCollectionConfig['upload']
 }
 
diff --git a/packages/ui/src/elements/Thumbnail/index.scss b/packages/ui/src/elements/Thumbnail/index.scss
index d73a340e0bd..f463c806891 100644
--- a/packages/ui/src/elements/Thumbnail/index.scss
+++ b/packages/ui/src/elements/Thumbnail/index.scss
@@ -19,14 +19,6 @@
     &--size-expand {
       max-height: 100%;
       width: 100%;
-      padding-top: 100%;
-      position: relative;
-
-      img,
-      svg {
-        position: absolute;
-        top: 0;
-      }
     }
 
     &--size-large {
diff --git a/packages/ui/src/elements/Thumbnail/index.tsx b/packages/ui/src/elements/Thumbnail/index.tsx
index 96efc37460b..a836f349c90 100644
--- a/packages/ui/src/elements/Thumbnail/index.tsx
+++ b/packages/ui/src/elements/Thumbnail/index.tsx
@@ -17,7 +17,7 @@ export type ThumbnailProps = {
   doc?: Record<string, unknown>
   fileSrc?: string
   height?: number
-  imageCacheTag?: string
+  imageCacheTag?: false | string
   size?: 'expand' | 'large' | 'medium' | 'none' | 'small'
   uploadConfig?: SanitizedCollectionConfig['upload']
   width?: number
@@ -73,7 +73,7 @@ type ThumbnailComponentProps = {
   readonly className?: string
   readonly filename: string
   readonly fileSrc: string
-  readonly imageCacheTag?: string
+  readonly imageCacheTag?: false | string
   readonly size?: 'expand' | 'large' | 'medium' | 'none' | 'small'
 }
 export function ThumbnailComponent(props: ThumbnailComponentProps) {
diff --git a/packages/ui/src/elements/Upload/UploadFromURLModal/index.tsx b/packages/ui/src/elements/Upload/UploadFromURLModal/index.tsx
new file mode 100644
index 00000000000..d6ad6f51401
--- /dev/null
+++ b/packages/ui/src/elements/Upload/UploadFromURLModal/index.tsx
@@ -0,0 +1,52 @@
+'use client'
+import React from 'react'
+
+import { TextInput } from '../../../fields/Text/Input.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { Button } from '../../Button/index.js'
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'
+
+export const pasteURLDrawerSlug = 'upload-paste-url'
+
+type Props = {
+  readonly fileUrl: string
+  readonly handleUrlSubmit: () => Promise<void>
+  readonly isValidUrl: boolean
+  readonly setFileUrl: (url: string) => void
+}
+
+export const UploadFromURLModal: React.FC<Props> = ({
+  fileUrl,
+  handleUrlSubmit,
+  isValidUrl,
+  setFileUrl,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <DialogModal closeOnBlur slug={pasteURLDrawerSlug}>
+      <DialogHeader showClose title={t('upload:fromURL')} />
+      <DialogBody>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            void handleUrlSubmit()
+          }}
+        >
+          <TextInput
+            label={t('upload:linkToFile')}
+            onChange={(e) => setFileUrl(e.target.value)}
+            path="url"
+            placeholder="https://"
+            value={fileUrl}
+          />
+        </form>
+      </DialogBody>
+      <DialogFooter>
+        <Button buttonStyle="primary" disabled={!isValidUrl} onClick={() => void handleUrlSubmit()}>
+          {t('upload:addFile')}
+        </Button>
+      </DialogFooter>
+    </DialogModal>
+  )
+}
diff --git a/packages/ui/src/elements/Upload/UploadRenameModal/index.tsx b/packages/ui/src/elements/Upload/UploadRenameModal/index.tsx
new file mode 100644
index 00000000000..2258668b9d8
--- /dev/null
+++ b/packages/ui/src/elements/Upload/UploadRenameModal/index.tsx
@@ -0,0 +1,57 @@
+'use client'
+import { useModal } from '@faceless-ui/modal'
+import React, { useEffect, useState } from 'react'
+
+import { TextInput } from '../../../fields/Text/Input.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { Button } from '../../Button/index.js'
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../Dialog/index.js'
+
+export const renameFileModalSlug = 'upload-rename-file'
+
+type Props = {
+  readonly currentFilename: string
+  readonly onConfirm: (newName: string) => void
+}
+
+export const UploadRenameModal: React.FC<Props> = ({ currentFilename, onConfirm }) => {
+  const { closeModal } = useModal()
+  const { t } = useTranslation()
+  const [newName, setNewName] = useState(currentFilename)
+
+  useEffect(() => {
+    setNewName(currentFilename)
+  }, [currentFilename])
+
+  const isUnchanged = newName.trim() === currentFilename
+  const isEmpty = !newName.trim()
+
+  return (
+    <DialogModal slug={renameFileModalSlug}>
+      <DialogHeader showClose title={t('upload:renameFile')} />
+      <DialogBody>
+        <TextInput
+          label={t('upload:fileName')}
+          onChange={(e) => setNewName(e.target.value)}
+          path="filename"
+          value={newName}
+        />
+      </DialogBody>
+      <DialogFooter>
+        <Button buttonStyle="secondary" onClick={() => closeModal(renameFileModalSlug)}>
+          {t('general:cancel')}
+        </Button>
+        <Button
+          buttonStyle="primary"
+          disabled={isEmpty || isUnchanged}
+          onClick={() => {
+            onConfirm(newName.trim())
+            closeModal(renameFileModalSlug)
+          }}
+        >
+          {t('general:rename')}
+        </Button>
+      </DialogFooter>
+    </DialogModal>
+  )
+}
diff --git a/packages/ui/src/elements/Upload/UploadToolbar/index.css b/packages/ui/src/elements/Upload/UploadToolbar/index.css
new file mode 100644
index 00000000000..88c3509ecba
--- /dev/null
+++ b/packages/ui/src/elements/Upload/UploadToolbar/index.css
@@ -0,0 +1,69 @@
+@layer payload-default {
+  .upload-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacer-2) var(--spacer-4) var(--spacer-2) var(--spacer-2);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg);
+    flex-shrink: 0;
+  }
+
+  .upload-toolbar__left {
+    display: flex;
+    align-items: flex-start;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .upload-toolbar__right {
+    display: flex;
+    gap: var(--spacer-1);
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .upload-toolbar__filename-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    padding: var(--spacer-1) var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    max-width: 200px;
+
+    &:hover {
+      background: var(--color-bg-transparent-hover);
+    }
+  }
+
+  .upload-toolbar__filename-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .upload-toolbar__icon-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-medium);
+    color: var(--color-icon);
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-bg-transparent-hover);
+      color: var(--color-icon);
+    }
+  }
+}
diff --git a/packages/ui/src/elements/Upload/UploadToolbar/index.tsx b/packages/ui/src/elements/Upload/UploadToolbar/index.tsx
new file mode 100644
index 00000000000..dae3d8d4b71
--- /dev/null
+++ b/packages/ui/src/elements/Upload/UploadToolbar/index.tsx
@@ -0,0 +1,94 @@
+'use client'
+import { useModal } from '@faceless-ui/modal'
+import React from 'react'
+
+import { ChevronIcon } from '../../../icons/Chevron/index.js'
+import { CropIcon } from '../../../icons/Crop/index.js'
+import { DownloadIcon } from '../../../icons/Download/index.js'
+import { EditIcon } from '../../../icons/Edit/index.js'
+import { RefreshIcon } from '../../../icons/Refresh/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { Button } from '../../Button/index.js'
+import { Popup } from '../../Popup/index.js'
+import * as PopupList from '../../Popup/PopupButtonList/index.js'
+import { renameFileModalSlug, UploadRenameModal } from '../UploadRenameModal/index.js'
+import './index.css'
+
+const baseClass = 'upload-toolbar'
+
+type Props = {
+  readonly filename: string
+  readonly fileSrc?: null | string
+  readonly isAdjustable?: boolean
+  readonly onEditImage?: () => void
+  readonly onRenameConfirm: (newName: string) => void
+  readonly onReplace?: () => void
+}
+
+export const UploadToolbar: React.FC<Props> = ({
+  filename,
+  fileSrc,
+  isAdjustable,
+  onEditImage,
+  onRenameConfirm,
+  onReplace,
+}) => {
+  const { t } = useTranslation()
+  const { openModal } = useModal()
+
+  return (
+    <>
+      <UploadRenameModal currentFilename={filename} onConfirm={onRenameConfirm} />
+      <div className={baseClass}>
+        <div className={`${baseClass}__left`}>
+          <Popup
+            button={
+              <span className={`${baseClass}__filename-btn`}>
+                <span className={`${baseClass}__filename-text`}>{filename}</span>
+                <ChevronIcon size={16} />
+              </span>
+            }
+            buttonType="custom"
+            horizontalAlign="left"
+            size="small"
+            verticalAlign="bottom"
+          >
+            <PopupList.MenuItem>
+              <PopupList.Button icon={<EditIcon />} onClick={() => openModal(renameFileModalSlug)}>
+                {t('general:rename')}
+              </PopupList.Button>
+              <PopupList.Button icon={<RefreshIcon />} onClick={onReplace}>
+                {t('upload:replaceFile')}
+              </PopupList.Button>
+            </PopupList.MenuItem>
+          </Popup>
+        </div>
+
+        <div className={`${baseClass}__right`}>
+          {isAdjustable && (
+            <Button
+              aria-label={t('upload:editImage')}
+              buttonStyle="ghost"
+              icon={<CropIcon size={24} />}
+              margin={false}
+              onClick={onEditImage}
+              round={false}
+              tooltip={t('upload:editImage')}
+            />
+          )}
+          {fileSrc && (
+            <a
+              aria-label={t('upload:download')}
+              className={`${baseClass}__icon-link`}
+              download={filename}
+              href={fileSrc}
+              title={t('upload:download')}
+            >
+              <DownloadIcon size={24} />
+            </a>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/src/elements/Upload/index.css b/packages/ui/src/elements/Upload/index.css
index e8a6b1e78c2..d7d411cda68 100644
--- a/packages/ui/src/elements/Upload/index.css
+++ b/packages/ui/src/elements/Upload/index.css
@@ -8,6 +8,7 @@
 
   .file-field__upload {
     display: flex;
+    position: relative;
   }
 
   .file-field .tooltip.error-message {
@@ -33,12 +34,14 @@
   }
 
   .file-field__remove {
-    margin: var(--spacer-4) var(--spacer-3) var(--spacer-3) 0;
-    place-self: flex-start;
+    position: absolute;
+    top: var(--spacer-2);
+    right: var(--spacer-2);
+    margin: 0;
+    z-index: 1;
   }
 
-  .file-field__file-adjustments,
-  .file-field__remote-file-wrap {
+  .file-field__file-adjustments {
     padding: var(--spacer-3);
     width: 100%;
     display: flex;
@@ -46,48 +49,10 @@
     gap: var(--spacer-2);
   }
 
-  .file-field__filename,
-  .file-field__remote-file {
-    font-family: var(--font-body);
-    width: 100%;
-    border: var(--stroke-width-small) solid var(--color-border);
-    border-radius: var(--radius-small);
-    background: var(--color-bg-primary);
-    color: var(--color-text);
-    font-size: 1rem;
-    height: var(--spacer-6);
-    line-height: var(--spacer-3);
-    padding: var(--spacer-1) var(--spacer-2-5);
-    -webkit-appearance: none;
-
-    &[data-rtl='true'] {
-      direction: rtl;
-    }
-
-    &::-webkit-input-placeholder {
-      color: var(--color-text-tertiary);
-      font-weight: normal;
-      font-size: 1rem;
-    }
-
-    &:hover {
-      border-color: var(--color-border-hover);
-    }
-
-    &:focus {
-      border-color: var(--color-border-selected);
-      outline: none;
-    }
-  }
-
-  .file-field__upload-actions,
-  .file-field__add-file-wrap {
+  .file-field__upload-actions {
     display: flex;
     gap: var(--spacer-2);
     flex-wrap: wrap;
-  }
-
-  .file-field__upload-actions {
     margin-top: var(--spacer-2);
   }
 
@@ -104,13 +69,18 @@
   .file-field .dropzone {
     background-color: transparent;
     padding: var(--spacer-2-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .file-field__dropzoneContent {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
-    gap: var(--spacer-1);
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacer-2);
+    justify-content: center;
     width: 100%;
   }
 
@@ -133,6 +103,127 @@
     color: var(--color-text-tertiary);
   }
 
+  .file-field--side-panel {
+    position: relative;
+    flex: 1 0 0;
+    width: 100%;
+    min-height: max(500px, calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
+    margin-bottom: 0;
+    border-radius: 0;
+    background: var(--color-bg-secondary);
+  }
+
+  .file-field__side-panel__content {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .file-field__side-panel__preview {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-3) var(--spacer-4);
+    gap: var(--spacer-3);
+    overflow: hidden;
+  }
+
+  .file-field__side-panel__info {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  /* Badge-style label matching Figma "Original" / size-name chip */
+  .file-field__side-panel__info-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--spacer-2);
+    height: 16px;
+    border-radius: var(--radius-small);
+    background: var(--color-bg-secondary-hover);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .file-field__side-panel__info-meta {
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .file-field__side-panel__image-wrap {
+    flex: 1 0 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+
+      img,
+      svg {
+        object-fit: scale-down;
+      }
+    }
+  }
+
+  .file-field__side-panel__upload {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-4);
+    height: 100%;
+
+    .dropzone {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .file-field--side-panel {
+      min-height: 400px;
+    }
+
+    .file-field__side-panel {
+      position: static;
+      height: auto;
+      min-height: 400px;
+    }
+
+    .file-field__side-panel__content {
+      flex-direction: column;
+    }
+
+    .file-field__side-panel__preview {
+      height: auto;
+    }
+  }
+
   @media (max-width: 768px) {
     .file-field__upload {
       flex-wrap: wrap;
diff --git a/packages/ui/src/elements/Upload/index.tsx b/packages/ui/src/elements/Upload/index.tsx
index 78307c5e599..2a25e4832cd 100644
--- a/packages/ui/src/elements/Upload/index.tsx
+++ b/packages/ui/src/elements/Upload/index.tsx
@@ -8,6 +8,7 @@ import { toast } from 'sonner'
 
 import { FieldError } from '../../fields/FieldError/index.js'
 import { fieldBaseClass } from '../../fields/shared/index.js'
+import { TextInput } from '../../fields/Text/Input.js'
 import { useForm, useFormProcessing } from '../../forms/Form/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { useConfig } from '../../providers/Config/index.js'
@@ -24,6 +25,9 @@ import './index.css'
 import { FileDetails } from '../FileDetails/index.js'
 import { PreviewSizes } from '../PreviewSizes/index.js'
 import { Thumbnail } from '../Thumbnail/index.js'
+import { pasteURLDrawerSlug, UploadFromURLModal } from './UploadFromURLModal/index.js'
+
+export { pasteURLDrawerSlug }
 
 const baseClass = 'file-field'
 export const editDrawerSlug = 'edit-upload'
@@ -83,7 +87,7 @@ export const UploadActions = ({
           )}
           {enableAdjustments && (
             <Button
-              buttonStyle="pill"
+              buttonStyle="secondary"
               className={`${baseClass}__edit`}
               margin={false}
               onClick={() => {
@@ -163,6 +167,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
   } = useConfig()
 
   const { t } = useTranslation()
+  const { closeModal, openModal } = useModal()
   const { setModified } = useForm()
   const { id, data, docPermissions, setUploadStatus } = useDocumentInfo()
   const isFormSubmitting = useFormProcessing()
@@ -174,10 +179,8 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
   const [fileSrc, setFileSrc] = useState<null | string>(null)
   const [removedFile, setRemovedFile] = useState(false)
   const [filename, setFilename] = useState<string>(value?.name || '')
-  const [showUrlInput, setShowUrlInput] = useState(false)
   const [fileUrl, setFileUrl] = useState<string>('')
 
-  const urlInputRef = useRef<HTMLInputElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
   const useServerSideFetch =
@@ -190,7 +193,6 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
       }
 
       setValue(file)
-      setShowUrlInput(false)
       setUploadControlFileUrl('')
       setUploadControlFileName(null)
       setUploadControlFile(null)
@@ -237,7 +239,6 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
     setFileSrc('')
     setFileUrl('')
     resetUploadEdits()
-    setShowUrlInput(false)
     setUploadControlFileUrl('')
     setUploadControlFileName(null)
     setUploadControlFile(null)
@@ -257,8 +258,10 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
     [setModified, updateUploadEdits],
   )
 
+  const isValidUrl = Boolean(fileUrl && URL.canParse(fileUrl))
+
   const handleUrlSubmit = useCallback(async () => {
-    if (!fileUrl || uploadConfig?.pasteURL === false) {
+    if (!fileUrl || !URL.canParse(fileUrl) || uploadConfig?.pasteURL === false) {
       return
     }
 
@@ -272,11 +275,14 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
       }
 
       const blob = await clientResponse.blob()
-      const fileName = uploadControlFileName || decodeURIComponent(fileUrl.split('/').pop() || '')
+      const rawSegment = fileUrl.split('/').pop() || ''
+      const fileName = uploadControlFileName || decodeURIComponent(rawSegment.split('?')[0])
       const file = new File([blob], fileName, { type: blob.type })
 
       handleFileChange({ file })
       setUploadStatus('idle')
+      closeModal(pasteURLDrawerSlug)
+      setFileUrl('')
       return // Exit if client-side fetch succeeds
     } catch (_clientError) {
       if (!useServerSideFetch) {
@@ -302,17 +308,21 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
       }
 
       const blob = await serverResponse.blob()
-      const fileName = decodeURIComponent(fileUrl.split('/').pop() || '')
+      const rawSegment = fileUrl.split('/').pop() || ''
+      const fileName = decodeURIComponent(rawSegment.split('?')[0])
       const file = new File([blob], fileName, { type: blob.type })
 
       handleFileChange({ file })
       setUploadStatus('idle')
+      closeModal(pasteURLDrawerSlug)
+      setFileUrl('')
     } catch (_serverError) {
       toast.error('The provided URL is not allowed.')
       setUploadStatus('failed')
     }
   }, [
     api,
+    closeModal,
     collectionSlug,
     fileUrl,
     handleFileChange,
@@ -330,12 +340,6 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
     }
   }, [initialState])
 
-  useEffect(() => {
-    if (showUrlInput && urlInputRef.current) {
-      // urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true
-    }
-  }, [showUrlInput])
-
   useEffect(() => {
     if (isFormSubmitting) {
       setRemovedFile(false)
@@ -378,6 +382,46 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
     void handleControlFile()
   }, [uploadControlFile, handleFileChange])
 
+  const drawers = (
+    <React.Fragment>
+      {(value || data?.filename) && (
+        <EditDepthProvider>
+          <EditUpload
+            fileName={value?.name || data?.filename}
+            fileSrc={data?.url || fileSrc}
+            imageCacheTag={imageCacheTag}
+            initialCrop={uploadEdits?.crop ?? undefined}
+            initialFocalPoint={{
+              x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
+              y: uploadEdits?.focalPoint?.y || data?.focalY || 50,
+            }}
+            onSave={onEditsSave}
+            showCrop={showCrop}
+            showFocalPoint={showFocalPoint}
+          />
+        </EditDepthProvider>
+      )}
+      {data && hasImageSizes && (
+        <Drawer
+          className={`${baseClass}__previewDrawer`}
+          hoverTitle
+          slug={sizePreviewSlug}
+          title={t('upload:sizesFor', { label: data.filename })}
+        >
+          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig} />
+        </Drawer>
+      )}
+      {uploadConfig?.pasteURL !== false && (
+        <UploadFromURLModal
+          fileUrl={fileUrl}
+          handleUrlSubmit={handleUrlSubmit}
+          isValidUrl={isValidUrl}
+          setFileUrl={setFileUrl}
+        />
+      )}
+    </React.Fragment>
+  )
+
   return (
     <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>
       <FieldError message={errorMessage} showError={showError} />
@@ -396,7 +440,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
       )}
       {((!uploadConfig.hideFileInputOnCreate && !data?.filename) || removedFile) && (
         <div className={`${baseClass}__upload`}>
-          {!value && !showUrlInput && (
+          {!value && (
             <Dropzone onChange={handleFileSelection}>
               <div className={`${baseClass}__dropzoneContent`}>
                 <div className={`${baseClass}__dropzoneButtons`}>
@@ -430,7 +474,7 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                       <Button
                         buttonStyle="pill"
                         onClick={() => {
-                          setShowUrlInput(true)
+                          openModal(pasteURLDrawerSlug)
                           setUploadControlFileUrl('')
                           setUploadControlFile(null)
                           setUploadControlFileName(null)
@@ -450,49 +494,16 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
               </div>
             </Dropzone>
           )}
-          {showUrlInput && (
+          {value && fileSrc && (
             <React.Fragment>
-              <div className={`${baseClass}__remote-file-wrap`}>
-                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-                <input
-                  className={`${baseClass}__remote-file`}
-                  onChange={(e) => {
-                    setFileUrl(e.target.value)
-                  }}
-                  ref={urlInputRef}
-                  title={fileUrl}
-                  type="text"
-                  value={fileUrl}
-                />
-                <div className={`${baseClass}__add-file-wrap`}>
-                  <button
-                    className={`${baseClass}__add-file`}
-                    onClick={() => {
-                      void handleUrlSubmit()
-                    }}
-                    type="button"
-                  >
-                    {t('upload:addFile')}
-                  </button>
-                </div>
-              </div>
               <Button
                 buttonStyle="ghost"
                 className={`${baseClass}__remove`}
                 icon="x"
-                onClick={() => {
-                  setShowUrlInput(false)
-                  setUploadControlFileUrl('')
-                  setUploadControlFile(null)
-                  setUploadControlFileName(null)
-                }}
+                onClick={handleFileRemoval}
                 round
                 tooltip={t('general:cancel')}
               />
-            </React.Fragment>
-          )}
-          {value && fileSrc && (
-            <React.Fragment>
               <div className={`${baseClass}__thumbnail-wrap`}>
                 <Thumbnail
                   collectionSlug={collectionSlug}
@@ -500,12 +511,10 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                 />
               </div>
               <div className={`${baseClass}__file-adjustments`}>
-                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-                <input
-                  className={`${baseClass}__filename`}
+                <TextInput
+                  label={t('upload:fileName')}
                   onChange={handleFileNameChange}
-                  title={filename || value.name}
-                  type="text"
+                  path="filename"
                   value={filename || value.name}
                 />
                 <UploadActions
@@ -515,47 +524,11 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
                   mimeType={value.type}
                 />
               </div>
-              <Button
-                buttonStyle="ghost"
-                className={`${baseClass}__remove`}
-                icon="x"
-                onClick={handleFileRemoval}
-                round
-                tooltip={t('general:cancel')}
-              />
             </React.Fragment>
           )}
         </div>
       )}
-      {(value || data?.filename) && (
-        <EditDepthProvider>
-          <Drawer Header={null} slug={editDrawerSlug}>
-            <EditUpload
-              fileName={value?.name || data?.filename}
-              fileSrc={data?.url || fileSrc}
-              imageCacheTag={imageCacheTag}
-              initialCrop={uploadEdits?.crop ?? undefined}
-              initialFocalPoint={{
-                x: uploadEdits?.focalPoint?.x || data?.focalX || 50,
-                y: uploadEdits?.focalPoint?.y || data?.focalY || 50,
-              }}
-              onSave={onEditsSave}
-              showCrop={showCrop}
-              showFocalPoint={showFocalPoint}
-            />
-          </Drawer>
-        </EditDepthProvider>
-      )}
-      {data && hasImageSizes && (
-        <Drawer
-          className={`${baseClass}__previewDrawer`}
-          hoverTitle
-          slug={sizePreviewSlug}
-          title={t('upload:sizesFor', { label: data.filename })}
-        >
-          <PreviewSizes doc={data} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig} />
-        </Drawer>
-      )}
+      {drawers}
     </div>
   )
 }
diff --git a/packages/ui/src/exports/client/index.ts b/packages/ui/src/exports/client/index.ts
index 9f18451662b..9e84ed1dd94 100644
--- a/packages/ui/src/exports/client/index.ts
+++ b/packages/ui/src/exports/client/index.ts
@@ -111,6 +111,7 @@ export { CopyLocaleData } from '../../elements/CopyLocaleData/index.js'
 export { CopyToClipboard } from '../../elements/CopyToClipboard/index.js'
 export { DeleteMany } from '../../elements/DeleteMany/index.js'
 export { DocumentControls } from '../../elements/DocumentControls/index.js'
+export { DocumentHeaderRoot } from '../../elements/DocumentHeader/DocumentHeaderRoot/index.js'
 export { Dropzone } from '../../elements/Dropzone/index.js'
 export { documentDrawerBaseClass, useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
 export {
diff --git a/packages/ui/src/icons/Crop/index.css b/packages/ui/src/icons/Crop/index.css
new file mode 100644
index 00000000000..2249338b414
--- /dev/null
+++ b/packages/ui/src/icons/Crop/index.css
@@ -0,0 +1,5 @@
+@layer payload-default {
+  .icon--crop {
+    /* Icon uses fill="currentColor" inline */
+  }
+}
diff --git a/packages/ui/src/icons/Crop/index.tsx b/packages/ui/src/icons/Crop/index.tsx
new file mode 100644
index 00000000000..9e3a46eddd5
--- /dev/null
+++ b/packages/ui/src/icons/Crop/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import './index.css'
+
+// Paths from Figma icon library (fpl/components/src/icons/icon-24-crop.tsx)
+const paths: Record<16 | 24, string> = {
+  16: 'M3 3V9H5V5H9V3H3ZM13 7H11V11H7V13H13V7Z',
+  24: 'M7.5 3a.5.5 0 0 1 .5.5V16h8V8H9.5a.5.5 0 0 1 0-1h7a.5.5 0 0 1 .5.5V16h3.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 .5-.5m9 15a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5',
+}
+
+export const CropIcon: React.FC<{
+  readonly className?: string
+  readonly size?: 16 | 24
+}> = ({ className, size = 24 }) => (
+  <svg
+    aria-hidden="true"
+    className={['icon', 'icon--crop', className].filter(Boolean).join(' ')}
+    fill="none"
+    focusable="false"
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path clipRule="evenodd" d={paths[size]} fill="currentColor" fillRule="evenodd" />
+  </svg>
+)
diff --git a/packages/ui/src/icons/Download/index.css b/packages/ui/src/icons/Download/index.css
new file mode 100644
index 00000000000..4f2046d6b2e
--- /dev/null
+++ b/packages/ui/src/icons/Download/index.css
@@ -0,0 +1,5 @@
+@layer payload-default {
+  .icon--download {
+    /* Icon uses fill="currentColor" inline */
+  }
+}
diff --git a/packages/ui/src/icons/Download/index.tsx b/packages/ui/src/icons/Download/index.tsx
new file mode 100644
index 00000000000..2b5017682cb
--- /dev/null
+++ b/packages/ui/src/icons/Download/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import './index.css'
+
+// Paths from Figma icon library
+// 24px: fpl/components/src/icons/icon-24-export-small.tsx
+// 16px: fpl/components/src/icons/icon-16-download.tsx
+const paths: Record<16 | 24, string> = {
+  16: 'M8 2.5a.5.5 0 0 0-1 0v5.793L5.354 6.646a.5.5 0 1 0-.707.708l2.5 2.5a.5.5 0 0 0 .707 0l2.5-2.5a.5.5 0 0 0-.707-.708L8 8.293zm-4 8a.5.5 0 0 0-1 0v1A1.5 1.5 0 0 0 4.5 13h6a1.5 1.5 0 0 0 1.5-1.5v-1a.5.5 0 0 0-1 0v1a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5z',
+  24: 'M12 6.5a.5.5 0 0 0-1 0v5.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L12 12.293zm-5 7a.5.5 0 0 0-1 0v3A1.5 1.5 0 0 0 7.5 18h8a1.5 1.5 0 0 0 1.5-1.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5z',
+}
+
+export const DownloadIcon: React.FC<{
+  readonly className?: string
+  readonly size?: 16 | 24
+}> = ({ className, size = 24 }) => (
+  <svg
+    aria-hidden="true"
+    className={['icon', 'icon--download', className].filter(Boolean).join(' ')}
+    fill="none"
+    focusable="false"
+    height={size}
+    viewBox={`0 0 ${size} ${size}`}
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path clipRule="evenodd" d={paths[size]} fill="currentColor" fillRule="evenodd" />
+  </svg>
+)
diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss
index b4b83d36d0c..48b27db9b3c 100644
--- a/packages/ui/src/scss/app.scss
+++ b/packages/ui/src/scss/app.scss
@@ -38,7 +38,9 @@
 
     --gutter-h: var(--spacer-5);
     --spacing-view-bottom: var(--gutter-h);
-    --doc-controls-height: calc(var(--text-body-large-line-height) + var(--spacer-4));
+    --app-header-height: 0px;
+    --doc-controls-height: 0px;
+    --doc-header-height: 0px;
     --nav-width: 275px;
 
     @include large-break {
@@ -47,7 +49,6 @@
 
     @include mid-break {
       --gutter-h: var(--spacer-3);
-      --doc-controls-height: calc(var(--base) * 2.4);
     }
 
     @include small-break {
diff --git a/packages/ui/src/views/Document/index.tsx b/packages/ui/src/views/Document/index.tsx
index 38e8e206d37..95b63272fd6 100644
--- a/packages/ui/src/views/Document/index.tsx
+++ b/packages/ui/src/views/Document/index.tsx
@@ -375,6 +375,7 @@ export const renderDocument = async ({
   const documentSlots = renderDocumentSlots({
     id,
     collectionConfig,
+    doc: doc as Record<string, unknown>,
     globalConfig,
     hasSavePermission,
     locale,
diff --git a/packages/ui/src/views/Document/renderDocumentSlots.tsx b/packages/ui/src/views/Document/renderDocumentSlots.tsx
index 7097128bb1b..90f9c4543e3 100644
--- a/packages/ui/src/views/Document/renderDocumentSlots.tsx
+++ b/packages/ui/src/views/Document/renderDocumentSlots.tsx
@@ -3,6 +3,7 @@ import type {
   DocumentSlots,
   EditMenuItemsServerPropsOnly,
   Locale,
+  PayloadComponent,
   PayloadRequest,
   PreviewButtonServerPropsOnly,
   PublishButtonServerPropsOnly,
@@ -15,11 +16,12 @@ import type {
   ServerProps,
   StaticDescription,
   UnpublishButtonServerPropsOnly,
+  UploadFilePreviewClientProps,
   ViewDescriptionClientProps,
   ViewDescriptionServerPropsOnly,
 } from 'payload'
 
-import { hasDraftsEnabled } from 'payload/shared'
+import { hasDraftsEnabled, matchMimeType } from 'payload/shared'
 
 import { RenderServerComponent } from '../../elements/RenderServerComponent/index.js'
 // eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports/client bundle for proper client boundary in prod builds
@@ -28,6 +30,7 @@ import { getDocumentPermissions } from '../../utilities/getDocumentPermissions.j
 
 export const renderDocumentSlots: (args: {
   collectionConfig?: SanitizedCollectionConfig
+  doc?: Record<string, unknown>
   globalConfig?: SanitizedGlobalConfig
   hasSavePermission: boolean
   id?: number | string
@@ -35,7 +38,8 @@ export const renderDocumentSlots: (args: {
   permissions: SanitizedPermissions
   req: PayloadRequest
 }) => DocumentSlots = (args) => {
-  const { id, collectionConfig, globalConfig, hasSavePermission, locale, permissions, req } = args
+  const { id, collectionConfig, doc, globalConfig, hasSavePermission, locale, permissions, req } =
+    args
 
   const components: DocumentSlots = {} as DocumentSlots
 
@@ -222,6 +226,40 @@ export const renderDocumentSlots: (args: {
     })
   }
 
+  const filePreviewConfig = collectionConfig?.upload?.admin?.components?.filePreview
+  if (collectionConfig?.upload && filePreviewConfig) {
+    const mimeType = (doc?.mimeType as string) ?? ''
+    let filePreviewComponent: PayloadComponent | undefined
+
+    if (
+      typeof filePreviewConfig === 'string' ||
+      (typeof filePreviewConfig === 'object' && 'path' in filePreviewConfig)
+    ) {
+      filePreviewComponent = filePreviewConfig as PayloadComponent
+    } else {
+      filePreviewComponent = matchMimeType(
+        filePreviewConfig as Record<string, PayloadComponent>,
+        mimeType,
+      )
+    }
+
+    if (filePreviewComponent) {
+      components.UploadFilePreview = RenderServerComponent({
+        clientProps: {
+          filename: doc?.filename,
+          filesize: doc?.filesize,
+          fileSrc: doc?.url,
+          height: doc?.height,
+          mimeType,
+          width: doc?.width,
+        } as UploadFilePreviewClientProps,
+        Component: filePreviewComponent,
+        importMap: req.payload.importMap,
+        serverProps,
+      })
+    }
+  }
+
   return components
 }
 
@@ -244,9 +282,30 @@ export const renderDocumentSlotsHandler: ServerFunction<{
     req,
   })
 
+  let doc: Record<string, unknown> | undefined
+  if (id && collectionConfig.upload) {
+    const result = await req.payload.findByID({
+      id,
+      collection: collectionSlug,
+      depth: 0,
+      overrideAccess: false,
+      req,
+      select: {
+        filename: true,
+        filesize: true,
+        height: true,
+        mimeType: true,
+        url: true,
+        width: true,
+      },
+    })
+    doc = result as Record<string, unknown>
+  }
+
   return renderDocumentSlots({
     id,
     collectionConfig,
+    doc,
     hasSavePermission,
     locale,
     permissions,
diff --git a/packages/ui/src/views/Edit/index.css b/packages/ui/src/views/Edit/index.css
index 9100ba67b01..1aa83062d8a 100644
--- a/packages/ui/src/views/Edit/index.css
+++ b/packages/ui/src/views/Edit/index.css
@@ -7,12 +7,57 @@
   .collection-edit__main {
     width: 100%;
     container-type: inline-size;
+    container-name: edit-main;
   }
 
   .collection-edit__main--popup-open {
     width: 100%;
   }
 
+  .collection-edit__upload-layout {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    /* The file manager renders before the fields in the DOM (so it stacks on top at mobile),
+       but on desktop it should sit after them in the row at 2fr. The divider lives on the file
+       manager (not the fields) because it always stretches full height — the fields may be short. */
+    .file-manager {
+      order: 2;
+      flex: 2;
+      border-inline-start: 1px solid var(--color-border);
+    }
+
+    .document-fields {
+      flex: 1;
+    }
+
+    .document-fields:not(:has(.document-fields__sidebar-wrap)):not(:has(.document-fields__edit > :not(.document-fields__fields))):not(:has(.document-fields__fields > :not(input[type="hidden"]))) {
+      display: none;
+    }
+  }
+
+  /* Container query (not viewport) so the layout stacks based on the space actually available
+     to the edit view — e.g. inside a narrow document drawer it uses the stacked mobile layout. */
+  @container edit-main (max-width: 1024px) {
+    .collection-edit__upload-layout {
+      flex-direction: column;
+      gap: var(--spacer-5);
+
+      .file-manager {
+        order: 0;
+        flex: 1 0 0;
+        /* Stacked — no vertical divider; the file manager's own bottom border separates it. */
+        border-inline-start: 0;
+      }
+
+      .document-fields {
+        flex: 0 0 auto;
+        width: 100%;
+      }
+    }
+  }
+
   .collection-edit__main--is-live-previewing {
     width: 40%;
     position: relative;
diff --git a/packages/ui/src/views/Edit/index.tsx b/packages/ui/src/views/Edit/index.tsx
index d8d2e4016b0..a0a70282710 100644
--- a/packages/ui/src/views/Edit/index.tsx
+++ b/packages/ui/src/views/Edit/index.tsx
@@ -3,7 +3,7 @@
 import type { ClientUser, DocumentViewClientProps } from 'payload'
 
 import { formatAdminURL, hasAutosaveEnabled } from 'payload/shared'
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
 import type { FormProps } from '../../forms/Form/index.js'
@@ -17,9 +17,9 @@ import { DocumentFields } from '../../elements/DocumentFields/index.js'
 import { DocumentLocked } from '../../elements/DocumentLocked/index.js'
 import { DocumentStaleData } from '../../elements/DocumentStaleData/index.js'
 import { DocumentTakeOver } from '../../elements/DocumentTakeOver/index.js'
+import { FileManager } from '../../elements/FileManager/index.js'
 import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'
 import { LivePreviewWindow } from '../../elements/LivePreview/Window/index.js'
-import { Upload } from '../../elements/Upload/index.js'
 import { Form } from '../../forms/Form/index.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
@@ -68,6 +68,7 @@ export function DefaultEditView({
   UnpublishButton,
   Upload: CustomUpload,
   UploadControls,
+  UploadFilePreview,
 }: DocumentViewClientProps) {
   const {
     id,
@@ -781,53 +782,81 @@ export function DefaultEditView({
                 .filter(Boolean)
                 .join(' ')}
             >
-              <DocumentFields
-                AfterFields={AfterFields}
-                BeforeFields={
-                  BeforeFields || (
-                    <Fragment>
-                      {auth && (
-                        <Auth
-                          className={`${baseClass}__auth`}
-                          collectionSlug={collectionConfig.slug}
-                          disableLocalStrategy={collectionConfig.auth?.disableLocalStrategy}
-                          email={data?.email}
-                          loginWithUsername={auth?.loginWithUsername}
-                          operation={operation}
-                          readOnly={!hasSavePermission}
-                          requirePassword={!id}
-                          setValidateBeforeSubmit={setValidateBeforeSubmit}
-                          // eslint-disable-next-line react-compiler/react-compiler
-                          useAPIKey={auth.useAPIKey}
-                          username={data?.username}
-                          verify={auth.verify}
-                        />
-                      )}
-                      {upload && (
-                        <React.Fragment>
-                          <UploadControlsProvider>
-                            {CustomUpload || (
-                              <Upload
-                                collectionSlug={collectionConfig.slug}
-                                initialState={initialState}
-                                uploadConfig={upload}
-                                UploadControls={UploadControls}
-                              />
-                            )}
-                          </UploadControlsProvider>
-                        </React.Fragment>
-                      )}
-                    </Fragment>
-                  )
-                }
-                Description={Description}
-                docPermissions={docPermissions}
-                fields={docConfig.fields}
-                forceSidebarWrap={isLivePreviewing}
-                isTrashed={isTrashed}
-                readOnly={isReadOnlyForIncomingUser || !hasSavePermission || isTrashed}
-                schemaPathSegments={schemaPathSegments}
-              />
+              {upload && !BeforeFields ? (
+                <UploadControlsProvider>
+                  <div className={`${baseClass}__upload-layout`}>
+                    {CustomUpload || (
+                      <FileManager
+                        collectionSlug={collectionConfig.slug}
+                        initialState={initialState}
+                        uploadConfig={upload}
+                        UploadControls={UploadControls}
+                        UploadFilePreview={UploadFilePreview}
+                      />
+                    )}
+                    <DocumentFields
+                      AfterFields={AfterFields}
+                      BeforeFields={
+                        auth ? (
+                          <Auth
+                            className={`${baseClass}__auth`}
+                            collectionSlug={collectionConfig.slug}
+                            disableLocalStrategy={collectionConfig.auth?.disableLocalStrategy}
+                            email={data?.email}
+                            loginWithUsername={auth?.loginWithUsername}
+                            operation={operation}
+                            readOnly={!hasSavePermission}
+                            requirePassword={!id}
+                            setValidateBeforeSubmit={setValidateBeforeSubmit}
+                            // eslint-disable-next-line react-compiler/react-compiler
+                            useAPIKey={auth.useAPIKey}
+                            username={data?.username}
+                            verify={auth.verify}
+                          />
+                        ) : undefined
+                      }
+                      Description={Description}
+                      docPermissions={docPermissions}
+                      fields={docConfig.fields}
+                      forceSidebarWrap={isLivePreviewing}
+                      isTrashed={isTrashed}
+                      readOnly={isReadOnlyForIncomingUser || !hasSavePermission || isTrashed}
+                      schemaPathSegments={schemaPathSegments}
+                    />
+                  </div>
+                </UploadControlsProvider>
+              ) : (
+                <DocumentFields
+                  AfterFields={AfterFields}
+                  BeforeFields={
+                    BeforeFields ||
+                    (auth ? (
+                      <Auth
+                        className={`${baseClass}__auth`}
+                        collectionSlug={collectionConfig.slug}
+                        disableLocalStrategy={collectionConfig.auth?.disableLocalStrategy}
+                        email={data?.email}
+                        loginWithUsername={auth?.loginWithUsername}
+                        operation={operation}
+                        readOnly={!hasSavePermission}
+                        requirePassword={!id}
+                        setValidateBeforeSubmit={setValidateBeforeSubmit}
+                        // eslint-disable-next-line react-compiler/react-compiler
+                        useAPIKey={auth.useAPIKey}
+                        username={data?.username}
+                        verify={auth.verify}
+                      />
+                    ) : undefined)
+                  }
+                  Description={Description}
+                  docPermissions={docPermissions}
+                  fields={docConfig.fields}
+                  forceSidebarWrap={isLivePreviewing}
+                  isTrashed={isTrashed}
+                  readOnly={isReadOnlyForIncomingUser || !hasSavePermission || isTrashed}
+                  schemaPathSegments={schemaPathSegments}
+                />
+              )}
               {AfterDocument}
             </div>
             {isLivePreviewEnabled && !isInDrawer && livePreviewURL && (
diff --git a/test/evals/components/EvalDashboard/CompareTable.tsx b/test/evals/components/EvalDashboard/CompareTable.tsx
index 151eab3d589..6314b630b53 100644
--- a/test/evals/components/EvalDashboard/CompareTable.tsx
+++ b/test/evals/components/EvalDashboard/CompareTable.tsx
@@ -1094,9 +1094,7 @@ export function CompareTable({
         }
       `}</style>
           {/* A vs B configuration selectors */}
-          <div
-            style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '8px' }}
-          >
+          <div style={{ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
             <span
               style={{
                 color: 'var(--theme-elevation-500)',
@@ -1129,7 +1127,9 @@ export function CompareTable({
                 </option>
               ))}
             </select>
-            <span style={{ color: 'var(--theme-elevation-400)', fontSize: '1.1rem', padding: '0 2px' }}>
+            <span
+              style={{ color: 'var(--theme-elevation-400)', fontSize: '1.1rem', padding: '0 2px' }}
+            >
               →
             </span>
             <select
diff --git a/test/evals/components/EvalDashboard/ResultsTable.tsx b/test/evals/components/EvalDashboard/ResultsTable.tsx
index 30b3cfbdca3..dcebe53c7fe 100644
--- a/test/evals/components/EvalDashboard/ResultsTable.tsx
+++ b/test/evals/components/EvalDashboard/ResultsTable.tsx
@@ -1073,33 +1073,37 @@ export function ResultsTable({ codegenHtml, entries }: Props) {
               }}
             >
               {(
-                ['question', 'category', 'type', 'variant', 'model', 'result', 'tokens'] as SortKey[]
-              ).map(
-                (key) => (
-                  <span
-                    key={key}
-                    onClick={() => handleSort(key)}
-                    onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleSort(key)}
-                    role="button"
-                    style={{
-                      alignItems: 'center',
-                      color:
-                        sortKey === key
-                          ? 'var(--theme-elevation-800)'
-                          : 'var(--theme-elevation-500)',
-                      cursor: 'pointer',
-                      display: 'inline-flex',
-                      userSelect: 'none',
-                    }}
-                    tabIndex={0}
-                  >
-                    {key === 'question'
-                      ? 'Question / Task'
-                      : key.charAt(0).toUpperCase() + key.slice(1)}
-                    {sortIndicator(key)}
-                  </span>
-                ),
-              )}
+                [
+                  'question',
+                  'category',
+                  'type',
+                  'variant',
+                  'model',
+                  'result',
+                  'tokens',
+                ] as SortKey[]
+              ).map((key) => (
+                <span
+                  key={key}
+                  onClick={() => handleSort(key)}
+                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleSort(key)}
+                  role="button"
+                  style={{
+                    alignItems: 'center',
+                    color:
+                      sortKey === key ? 'var(--theme-elevation-800)' : 'var(--theme-elevation-500)',
+                    cursor: 'pointer',
+                    display: 'inline-flex',
+                    userSelect: 'none',
+                  }}
+                  tabIndex={0}
+                >
+                  {key === 'question'
+                    ? 'Question / Task'
+                    : key.charAt(0).toUpperCase() + key.slice(1)}
+                  {sortIndicator(key)}
+                </span>
+              ))}
               <span />
             </div>
 
diff --git a/test/plugin-mcp/types.spec.ts b/test/plugin-mcp/types.spec.ts
index 41681849980..b7613e8065a 100644
--- a/test/plugin-mcp/types.spec.ts
+++ b/test/plugin-mcp/types.spec.ts
@@ -68,7 +68,6 @@ describe('defineGlobalTool input inference', () => {
       return { content: [] }
     })
   })
-
 })
 
 describe('definePrompt input inference', () => {
diff --git a/test/uploads/christmas-mariachi-in-guadalajara.mp4 b/test/uploads/christmas-mariachi-in-guadalajara.mp4
new file mode 100644
index 00000000000..25e3941670b
Binary files /dev/null and b/test/uploads/christmas-mariachi-in-guadalajara.mp4 differ
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.client.tsx b/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.client.tsx
new file mode 100644
index 00000000000..20e0fe9938e
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.client.tsx
@@ -0,0 +1,8 @@
+'use client'
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+export const AudioFilePreviewClient: React.FC<UploadFilePreviewClientProps> = ({ fileSrc }) => {
+  return <div id="custom-file-preview-audio">test{fileSrc && <audio src={fileSrc} />}</div>
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.tsx b/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.tsx
new file mode 100644
index 00000000000..c276a782aa9
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/AudioFilePreview/index.tsx
@@ -0,0 +1,25 @@
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+import { AudioFilePreviewClient } from './index.client.js'
+
+export const AudioFilePreviewRSC: React.FC<UploadFilePreviewClientProps> = ({
+  filename,
+  filesize,
+  fileSrc,
+  height,
+  mimeType,
+  width,
+}) => {
+  return (
+    <AudioFilePreviewClient
+      filename={filename}
+      filesize={filesize}
+      fileSrc={fileSrc}
+      height={height}
+      mimeType={mimeType}
+      width={width}
+    />
+  )
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.client.tsx b/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.client.tsx
new file mode 100644
index 00000000000..d6b41711e52
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.client.tsx
@@ -0,0 +1,8 @@
+'use client'
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+export const PdfFilePreviewClient: React.FC<UploadFilePreviewClientProps> = ({ fileSrc }) => {
+  return <div id="custom-file-preview-pdf">{fileSrc && <span>{fileSrc}</span>}</div>
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.tsx b/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.tsx
new file mode 100644
index 00000000000..e6b1e49d947
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/PdfFilePreview/index.tsx
@@ -0,0 +1,25 @@
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+import { PdfFilePreviewClient } from './index.client.js'
+
+export const PdfFilePreviewRSC: React.FC<UploadFilePreviewClientProps> = ({
+  filename,
+  filesize,
+  fileSrc,
+  height,
+  mimeType,
+  width,
+}) => {
+  return (
+    <PdfFilePreviewClient
+      filename={filename}
+      filesize={filesize}
+      fileSrc={fileSrc}
+      height={height}
+      mimeType={mimeType}
+      width={width}
+    />
+  )
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.client.tsx b/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.client.tsx
new file mode 100644
index 00000000000..b809305ee8c
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.client.tsx
@@ -0,0 +1,15 @@
+'use client'
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+export const SingleFilePreviewClient: React.FC<UploadFilePreviewClientProps> = ({
+  fileSrc,
+  mimeType,
+}) => {
+  return (
+    <div data-mime-type={mimeType} id="custom-file-preview-single">
+      {fileSrc && <span>{fileSrc}</span>}
+    </div>
+  )
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.tsx b/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.tsx
new file mode 100644
index 00000000000..00f66568fb4
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/components/SingleFilePreview/index.tsx
@@ -0,0 +1,25 @@
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+import { SingleFilePreviewClient } from './index.client.js'
+
+export const SingleFilePreviewRSC: React.FC<UploadFilePreviewClientProps> = ({
+  filename,
+  filesize,
+  fileSrc,
+  height,
+  mimeType,
+  width,
+}) => {
+  return (
+    <SingleFilePreviewClient
+      filename={filename}
+      filesize={filesize}
+      fileSrc={fileSrc}
+      height={height}
+      mimeType={mimeType}
+      width={width}
+    />
+  )
+}
diff --git a/test/uploads/collections/AdminUploadFilePreview/index.ts b/test/uploads/collections/AdminUploadFilePreview/index.ts
new file mode 100644
index 00000000000..a7a9b0a01c5
--- /dev/null
+++ b/test/uploads/collections/AdminUploadFilePreview/index.ts
@@ -0,0 +1,45 @@
+import type { CollectionConfig } from 'payload'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { adminUploadFilePreviewMapSlug, adminUploadFilePreviewSingleSlug } from '../../shared.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const AdminUploadFilePreviewSingle: CollectionConfig = {
+  slug: adminUploadFilePreviewSingleSlug,
+  upload: {
+    staticDir: path.resolve(dirname, '../../media'),
+    admin: {
+      components: {
+        filePreview:
+          '/collections/AdminUploadFilePreview/components/SingleFilePreview/index.js#SingleFilePreviewRSC',
+      },
+    },
+  },
+  fields: [],
+  versions: false,
+}
+
+export const AdminUploadFilePreviewMap: CollectionConfig = {
+  slug: adminUploadFilePreviewMapSlug,
+  upload: {
+    staticDir: path.resolve(dirname, '../../media'),
+    admin: {
+      components: {
+        filePreview: {
+          'audio/*':
+            '/collections/AdminUploadFilePreview/components/AudioFilePreview/index.js#AudioFilePreviewRSC',
+          'application/pdf':
+            '/collections/AdminUploadFilePreview/components/PdfFilePreview/index.js#PdfFilePreviewRSC',
+          'video/*':
+            '/collections/FilePreview/components/FilePreview/index.js#FilePreviewComponent',
+        },
+      },
+    },
+  },
+  fields: [],
+  versions: false,
+}
diff --git a/test/uploads/collections/FilePreview/components/FilePreview/index.tsx b/test/uploads/collections/FilePreview/components/FilePreview/index.tsx
new file mode 100644
index 00000000000..4a64f61d34b
--- /dev/null
+++ b/test/uploads/collections/FilePreview/components/FilePreview/index.tsx
@@ -0,0 +1,43 @@
+'use client'
+import type { UploadFilePreviewClientProps } from 'payload'
+
+import React from 'react'
+
+export const FilePreviewComponent: React.FC<UploadFilePreviewClientProps> = ({
+  filename,
+  fileSrc,
+  mimeType,
+}) => {
+  const [category] = (mimeType ?? '').split('/')
+
+  switch (category) {
+    case 'audio':
+      return (
+        <div data-mime-category="audio" id="file-preview">
+          <audio controls src={fileSrc ?? undefined} />
+        </div>
+      )
+    case 'image':
+      return (
+        <div data-mime-category="image" id="file-preview">
+          <img
+            alt={filename}
+            src={fileSrc ?? undefined}
+            style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
+          />
+        </div>
+      )
+    case 'video':
+      return (
+        <div data-mime-category="video" id="file-preview">
+          <video controls src={fileSrc ?? undefined} style={{ maxWidth: '100%' }} />
+        </div>
+      )
+    default:
+      return (
+        <div data-mime-category="other" id="file-preview">
+          {fileSrc ? <a href={fileSrc}>{filename}</a> : filename}
+        </div>
+      )
+  }
+}
diff --git a/test/uploads/collections/FilePreview/index.ts b/test/uploads/collections/FilePreview/index.ts
new file mode 100644
index 00000000000..dc750d1eb42
--- /dev/null
+++ b/test/uploads/collections/FilePreview/index.ts
@@ -0,0 +1,24 @@
+import type { CollectionConfig } from 'payload'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import { filePreviewSlug } from '../../shared.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const FilePreviewCollection: CollectionConfig = {
+  slug: filePreviewSlug,
+  upload: {
+    staticDir: path.resolve(dirname, '../../media'),
+    admin: {
+      components: {
+        filePreview:
+          '/collections/FilePreview/components/FilePreview/index.js#FilePreviewComponent',
+      },
+    },
+  },
+  fields: [],
+  versions: false,
+}
diff --git a/test/uploads/config.ts b/test/uploads/config.ts
index 8049be18792..d1f5045da8f 100644
--- a/test/uploads/config.ts
+++ b/test/uploads/config.ts
@@ -6,11 +6,16 @@ import { AdminThumbnailFunction } from './collections/AdminThumbnailFunction/ind
 import { AdminThumbnailSize } from './collections/AdminThumbnailSize/index.js'
 import { AdminThumbnailWithSearchQueries } from './collections/AdminThumbnailWithSearchQueries/index.js'
 import { AdminUploadControl } from './collections/AdminUploadControl/index.js'
+import {
+  AdminUploadFilePreviewMap,
+  AdminUploadFilePreviewSingle,
+} from './collections/AdminUploadFilePreview/index.js'
 import { AnyImageTypeCollection } from './collections/AnyImageType/index.js'
 import { BulkUploadsCollection } from './collections/BulkUploads/index.js'
 import { BulkUploadsHookErrorCollection } from './collections/BulkUploadsHookError/index.js'
 import { CustomUploadFieldCollection } from './collections/CustomUploadField/index.js'
 import { FileMimeType } from './collections/FileMimeType/index.js'
+import { FilePreviewCollection } from './collections/FilePreview/index.js'
 import { NoFilesRequired } from './collections/NoFilesRequired/index.js'
 import { RelationToNoFilesRequired } from './collections/RelationToNoFilesRequired/index.js'
 import { SimpleRelationshipCollection } from './collections/SimpleRelationship/index.js'
@@ -29,6 +34,7 @@ import {
   imageSizesOnlySlug,
   listViewPreviewSlug,
   mediaSlug,
+  mediaWithFieldsSlug,
   mediaWithImageSizeAdminPropsSlug,
   mediaWithoutCacheTagsSlug,
   mediaWithoutDeleteAccessSlug,
@@ -833,6 +839,9 @@ export default buildConfigWithDefaults({
     AdminThumbnailWithSearchQueries,
     AdminThumbnailSize,
     AdminUploadControl,
+    AdminUploadFilePreviewSingle,
+    AdminUploadFilePreviewMap,
+    FilePreviewCollection,
     NoFilesRequired,
     RelationToNoFilesRequired,
     {
@@ -1125,6 +1134,286 @@ export default buildConfigWithDefaults({
       },
       versions: false,
     },
+    {
+      slug: mediaWithFieldsSlug,
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'description',
+          type: 'textarea',
+        },
+        {
+          name: 'altText',
+          label: 'Alt Text',
+          type: 'text',
+        },
+        {
+          name: 'caption',
+          type: 'text',
+        },
+        {
+          name: 'credit',
+          label: 'Photo Credit',
+          type: 'text',
+        },
+        {
+          name: 'source',
+          label: 'Source URL',
+          type: 'text',
+        },
+        {
+          name: 'category',
+          type: 'select',
+          options: ['Nature', 'Architecture', 'People', 'Abstract', 'Technology'],
+        },
+        {
+          name: 'tags',
+          type: 'text',
+          hasMany: true,
+        },
+        {
+          name: 'featured',
+          label: 'Featured Image',
+          type: 'checkbox',
+        },
+        {
+          name: 'photographer',
+          type: 'text',
+          admin: {
+            // position: 'sidebar',
+          },
+        },
+        {
+          name: 'priority',
+          type: 'select',
+          options: ['Low', 'Medium', 'High'],
+          defaultValue: 'Medium',
+        },
+        {
+          name: 'shootDate',
+          label: 'Shoot Date',
+          type: 'date',
+        },
+        {
+          name: 'location',
+          type: 'group',
+          fields: [
+            {
+              name: 'city',
+              type: 'text',
+            },
+            {
+              name: 'country',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          name: 'dimensions',
+          label: 'Original Dimensions',
+          type: 'group',
+          fields: [
+            {
+              name: 'widthCm',
+              label: 'Width (cm)',
+              type: 'number',
+            },
+            {
+              name: 'heightCm',
+              label: 'Height (cm)',
+              type: 'number',
+            },
+          ],
+        },
+        {
+          name: 'colorProfile',
+          label: 'Color Profile',
+          type: 'select',
+          options: ['sRGB', 'Adobe RGB', 'ProPhoto RGB', 'CMYK'],
+        },
+        {
+          name: 'license',
+          type: 'select',
+          options: ['All Rights Reserved', 'CC BY', 'CC BY-SA', 'CC BY-NC', 'Public Domain'],
+        },
+        {
+          name: 'licenseUrl',
+          label: 'License URL',
+          type: 'text',
+        },
+        {
+          name: 'notes',
+          label: 'Internal Notes',
+          type: 'textarea',
+        },
+        {
+          name: 'rating',
+          type: 'number',
+          min: 1,
+          max: 5,
+        },
+        {
+          name: 'exifData',
+          label: 'EXIF Data',
+          type: 'group',
+          fields: [
+            {
+              name: 'camera',
+              type: 'text',
+            },
+            {
+              name: 'lens',
+              type: 'text',
+            },
+            {
+              name: 'iso',
+              label: 'ISO',
+              type: 'number',
+            },
+            {
+              name: 'aperture',
+              type: 'text',
+            },
+            {
+              name: 'shutterSpeed',
+              label: 'Shutter Speed',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          name: 'published',
+          type: 'checkbox',
+          defaultValue: false,
+        },
+      ],
+      upload: {
+        crop: true,
+        imageSizes: [
+          {
+            name: 'thumbnail',
+            width: 300,
+            height: 300,
+            crop: 'centre',
+          },
+          {
+            name: 'card',
+            width: 768,
+            height: 512,
+          },
+          {
+            name: 'hero',
+            width: 1920,
+            height: 1080,
+          },
+          {
+            name: 'carousel1',
+            height: 100,
+            width: 100,
+          },
+          {
+            name: 'carousel2',
+            height: 100,
+            width: 150,
+          },
+          {
+            name: 'carousel3',
+            height: 150,
+            width: 100,
+          },
+          {
+            name: 'carousel4',
+            height: 120,
+            width: 200,
+          },
+          {
+            name: 'carousel5',
+            height: 200,
+            width: 120,
+          },
+          {
+            name: 'carousel6',
+            height: 250,
+            width: 250,
+          },
+          {
+            name: 'carousel7',
+            height: 180,
+            width: 320,
+          },
+          {
+            name: 'carousel8',
+            height: 320,
+            width: 180,
+          },
+          {
+            name: 'carousel9',
+            height: 300,
+            width: 400,
+          },
+          {
+            name: 'carousel10',
+            height: 400,
+            width: 300,
+          },
+          {
+            name: 'carousel11',
+            height: 200,
+            width: 500,
+          },
+          {
+            name: 'carousel12',
+            height: 500,
+            width: 200,
+          },
+          {
+            name: 'carousel13',
+            height: 360,
+            width: 640,
+          },
+          {
+            name: 'carousel14',
+            height: 640,
+            width: 360,
+          },
+          {
+            name: 'carousel15',
+            height: 128,
+            width: 128,
+          },
+          {
+            name: 'carousel16',
+            height: 96,
+            width: 96,
+          },
+          {
+            name: 'carousel17',
+            height: 64,
+            width: 64,
+          },
+          {
+            name: 'carousel18',
+            height: 450,
+            width: 800,
+          },
+          {
+            name: 'carousel19',
+            height: 800,
+            width: 450,
+          },
+          {
+            name: 'carousel20',
+            height: 1000,
+            width: 1000,
+          },
+        ],
+        staticDir: path.resolve(dirname, './media'),
+      },
+    },
   ],
   onInit: async (payload) => {
     if (process.env.SEED_IN_CONFIG_ONINIT !== 'false') {
diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts
index a52e1b0c35b..5e72e104226 100644
--- a/test/uploads/e2e.spec.ts
+++ b/test/uploads/e2e.spec.ts
@@ -36,6 +36,8 @@ import {
   adminThumbnailSizeSlug,
   adminThumbnailWithSearchQueries,
   adminUploadControlSlug,
+  adminUploadFilePreviewMapSlug,
+  adminUploadFilePreviewSingleSlug,
   animatedTypeMedia,
   audioSlug,
   bulkUploadsHookErrorSlug,
@@ -44,6 +46,7 @@ import {
   customFileNameMediaSlug,
   customUploadFieldSlug,
   fileMimeTypeSlug,
+  filePreviewSlug,
   focalOnlySlug,
   hideFileInputOnCreateSlug,
   imageSizesOnlySlug,
@@ -122,6 +125,9 @@ let mediaWithoutDeleteAccessURL: AdminUrlUtil
 let mediaWithImageSizeAdminPropsURL: AdminUrlUtil
 let noFilesRequiredURL: AdminUrlUtil
 let relationToNoFilesRequiredURL: AdminUrlUtil
+let adminUploadFilePreviewSingleURL: AdminUrlUtil
+let adminUploadFilePreviewMapURL: AdminUrlUtil
+let filePreviewURL: AdminUrlUtil
 
 describe('Uploads', () => {
   let page: Page
@@ -167,6 +173,9 @@ describe('Uploads', () => {
     mediaWithImageSizeAdminPropsURL = new AdminUrlUtil(serverURL, mediaWithImageSizeAdminPropsSlug)
     noFilesRequiredURL = new AdminUrlUtil(serverURL, noFilesRequiredSlug)
     relationToNoFilesRequiredURL = new AdminUrlUtil(serverURL, relationToNoFilesRequiredSlug)
+    adminUploadFilePreviewSingleURL = new AdminUrlUtil(serverURL, adminUploadFilePreviewSingleSlug)
+    adminUploadFilePreviewMapURL = new AdminUrlUtil(serverURL, adminUploadFilePreviewMapSlug)
+    filePreviewURL = new AdminUrlUtil(serverURL, filePreviewSlug)
 
     const context = await browser.newContext()
     await context.grantPermissions(['clipboard-read', 'clipboard-write'])
@@ -297,6 +306,85 @@ describe('Uploads', () => {
     expect(clipbaordContent).toBe(mediaDoc?.url)
   })
 
+  test('should show side-by-side layout for upload collection document with file', async () => {
+    const mediaDoc = (
+      await payload.find({
+        collection: mediaSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+      })
+    ).docs[0]
+
+    await page.goto(mediaURL.edit(mediaDoc!.id))
+    await waitForFormReady(page)
+
+    await expect(page.locator('.collection-edit__upload-layout')).toBeVisible()
+    await expect(page.locator('.file-field__side-panel')).toBeVisible()
+    await expect(page.locator('.file-field__side-panel__preview')).toBeVisible()
+    await expect(page.locator('.mini-carousel')).toBeVisible()
+  })
+
+  test('should open the current asset in a new tab from the upload toolbar', async () => {
+    const mediaDoc = (
+      await payload.find({
+        collection: mediaSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+      })
+    ).docs[0]
+
+    await page.goto(mediaURL.edit(mediaDoc!.id))
+    await waitForFormReady(page)
+
+    const previewLink = page.locator('.file-toolbar__right a[target="_blank"]')
+    const downloadLink = page.locator('.file-toolbar__right a[download]')
+
+    await expect(previewLink).toBeVisible()
+    await expect(previewLink).toHaveAttribute('rel', 'noopener noreferrer')
+
+    // Preview opens the same currently-shown asset that the download action targets
+    const previewHref = previewLink
+    const downloadHref = await downloadLink.getAttribute('href')
+    await expect(previewHref).toHaveAttribute('href')
+    expect(previewHref).toBe(downloadHref)
+  })
+
+  test('should show upload dropzone in right panel for new upload collection document', async () => {
+    await page.goto(mediaURL.create)
+    await waitForFormReady(page)
+
+    await expect(page.locator('.collection-edit__upload-layout')).toBeVisible()
+    await expect(page.locator('.file-field__side-panel .dropzone')).toBeVisible()
+  })
+
+  test('should switch active thumbnail when clicking mini carousel item', async () => {
+    const mediaDoc = (
+      await payload.find({
+        collection: mediaSlug,
+        depth: 0,
+        limit: 1,
+        pagination: false,
+        where: {
+          mimeType: { contains: 'image/' },
+        },
+      })
+    ).docs[0]
+
+    await page.goto(mediaURL.edit(mediaDoc!.id))
+    await waitForFormReady(page)
+
+    const carouselItems = page.locator('.mini-carousel__item')
+
+    await expect(carouselItems.first()).toHaveClass(/mini-carousel__item--active/)
+
+    await carouselItems.nth(1).click()
+
+    await expect(carouselItems.nth(1)).toHaveClass(/mini-carousel__item--active/)
+    await expect(carouselItems.first()).not.toHaveClass(/mini-carousel__item--active/)
+  })
+
   test('should create file upload', async () => {
     await page.goto(mediaURL.create)
     await page.setInputFiles('input[type="file"]', path.resolve(dirname, './image.png'))
@@ -2449,4 +2537,197 @@ describe('Uploads', () => {
     const response = await page.goto(`${serverURL}${href}`)
     expect(response?.status()).toBe(200)
   })
+
+  describe('filePreview custom components', () => {
+    test('should render single custom filePreview for any file type', async () => {
+      const imageDoc = (
+        await payload.find({
+          collection: adminUploadFilePreviewSingleSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'image/png' } },
+        })
+      ).docs[0]
+
+      await page.goto(adminUploadFilePreviewSingleURL.edit(imageDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#custom-file-preview-single')).toBeVisible()
+      await expect(page.locator('.file-field__side-panel__image-wrap .thumbnail')).toBeHidden()
+    })
+
+    test('should pass mimeType as clientProp to filePreview component', async () => {
+      const audioDoc = (
+        await payload.find({
+          collection: adminUploadFilePreviewSingleSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'audio/mpeg' } },
+        })
+      ).docs[0]
+
+      await page.goto(adminUploadFilePreviewSingleURL.edit(audioDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#custom-file-preview-single')).toHaveAttribute(
+        'data-mime-type',
+        'audio/mpeg',
+      )
+    })
+
+    test('should render filePreview matched by exact MIME type', async () => {
+      const pdfDoc = (
+        await payload.find({
+          collection: adminUploadFilePreviewMapSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'application/pdf' } },
+        })
+      ).docs[0]
+
+      await page.goto(adminUploadFilePreviewMapURL.edit(pdfDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#custom-file-preview-pdf')).toBeVisible()
+    })
+
+    test('should render filePreview matched by category wildcard', async () => {
+      const audioDoc = (
+        await payload.find({
+          collection: adminUploadFilePreviewMapSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'audio/mpeg' } },
+        })
+      ).docs[0]
+
+      await page.goto(adminUploadFilePreviewMapURL.edit(audioDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#custom-file-preview-audio')).toBeVisible()
+    })
+
+    test('should fall back to default Thumbnail when no filePreview matches', async () => {
+      const imageDoc = (
+        await payload.find({
+          collection: adminUploadFilePreviewMapSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'image/png' } },
+        })
+      ).docs[0]
+
+      await page.goto(adminUploadFilePreviewMapURL.edit(imageDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('.file-field__side-panel__image-wrap .thumbnail')).toBeVisible()
+      await expect(page.locator('#custom-file-preview-pdf')).toBeHidden()
+      await expect(page.locator('#custom-file-preview-audio')).toBeHidden()
+    })
+  })
+
+  describe('filePreview switch-case component', () => {
+    test('should render image branch for image uploads', async () => {
+      const imageDoc = (
+        await payload.find({
+          collection: filePreviewSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'image/png' } },
+        })
+      ).docs[0]
+
+      await page.goto(filePreviewURL.edit(imageDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#file-preview[data-mime-category="image"]')).toBeVisible()
+      await expect(page.locator('#file-preview img')).toBeVisible()
+    })
+
+    test('should render audio branch for audio uploads', async () => {
+      const audioDoc = (
+        await payload.find({
+          collection: filePreviewSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'audio/mpeg' } },
+        })
+      ).docs[0]
+
+      await page.goto(filePreviewURL.edit(audioDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('#file-preview[data-mime-category="audio"]')).toBeVisible()
+      await expect(page.locator('#file-preview audio')).toBeVisible()
+    })
+  })
+
+  describe('built-in file previews', () => {
+    test('should render the native audio player for audio uploads', async () => {
+      const audioDoc = (
+        await payload.find({
+          collection: mediaSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'audio/mpeg' } },
+        })
+      ).docs[0]
+
+      await page.goto(mediaURL.edit(audioDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('audio.audio-preview')).toBeVisible()
+      await expect(page.locator('.file-preview__thumbnail')).toBeHidden()
+    })
+
+    test('should render a browser iframe for PDF uploads', async () => {
+      const pdfDoc = (
+        await payload.find({
+          collection: mediaSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'application/pdf' } },
+        })
+      ).docs[0]
+
+      await page.goto(mediaURL.edit(pdfDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('iframe.pdf-preview')).toBeVisible()
+    })
+
+    test('should fall back to the thumbnail for image uploads', async () => {
+      const imageDoc = (
+        await payload.find({
+          collection: mediaSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'image/png' } },
+        })
+      ).docs[0]
+
+      await page.goto(mediaURL.edit(imageDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('.file-preview__thumbnail')).toBeVisible()
+      await expect(page.locator('.audio-preview')).toBeHidden()
+      await expect(page.locator('.pdf-preview')).toBeHidden()
+    })
+
+    test('should render the native video player for video uploads', async () => {
+      const videoDoc = (
+        await payload.find({
+          collection: mediaSlug,
+          depth: 0,
+          limit: 1,
+          where: { mimeType: { equals: 'video/mp4' } },
+        })
+      ).docs[0]
+
+      await page.goto(mediaURL.edit(videoDoc!.id))
+      await waitForFormReady(page)
+
+      await expect(page.locator('video.video-preview')).toBeVisible()
+    })
+  })
 })
diff --git a/test/uploads/payload-types.ts b/test/uploads/payload-types.ts
index 6bf4597ba95..fba307f1c2a 100644
--- a/test/uploads/payload-types.ts
+++ b/test/uploads/payload-types.ts
@@ -62,15 +62,15 @@ export type SupportedTimezones =
   | 'Pacific/Fiji';
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "LexicalNodes_7A11A510".
+ * via the `definition` "LexicalNodes_60C9F82D".
  */
-export type LexicalNodes_7A11A510 =
+export type LexicalNodes_60C9F82D =
   | SerializedTextNode
   | SerializedTabNode
   | SerializedLineBreakNode
-  | SerializedParagraphNode<LexicalNodes_7A11A510>
+  | SerializedParagraphNode<LexicalNodes_60C9F82D>
   | SerializedBlockNode<MyBlock>
-  | SerializedHeadingNode<LexicalNodes_7A11A510>
+  | SerializedHeadingNode<LexicalNodes_60C9F82D>
   | SerializedUploadNode<'gif-resize'>
   | SerializedUploadNode<'filename-compound-index'>
   | SerializedUploadNode<'no-image-sizes'>
@@ -105,6 +105,9 @@ export type LexicalNodes_7A11A510 =
   | SerializedUploadNode<'admin-thumbnail-with-search-queries'>
   | SerializedUploadNode<'admin-thumbnail-size'>
   | SerializedUploadNode<'admin-upload-control'>
+  | SerializedUploadNode<'admin-upload-file-preview-single'>
+  | SerializedUploadNode<'admin-upload-file-preview-map'>
+  | SerializedUploadNode<'file-preview'>
   | SerializedUploadNode<'no-files-required'>
   | SerializedUploadNode<'optional-file'>
   | SerializedUploadNode<'required-file'>
@@ -123,11 +126,12 @@ export type LexicalNodes_7A11A510 =
   | SerializedUploadNode<'media-without-delete-access'>
   | SerializedUploadNode<'media-with-image-size-admin-props'>
   | SerializedUploadNode<'prefix-media'>
-  | SerializedQuoteNode<LexicalNodes_7A11A510>
-  | SerializedListNode<LexicalNodes_7A11A510>
-  | SerializedListItemNode<LexicalNodes_7A11A510>
-  | SerializedAutoLinkNode<LexicalNodes_7A11A510, LexicalLinkFields_0A7E9EC0>
-  | SerializedLinkNode<LexicalNodes_7A11A510, LexicalLinkFields_0A7E9EC0>
+  | SerializedUploadNode<'media-with-fields'>
+  | SerializedQuoteNode<LexicalNodes_60C9F82D>
+  | SerializedListNode<LexicalNodes_60C9F82D>
+  | SerializedListItemNode<LexicalNodes_60C9F82D>
+  | SerializedAutoLinkNode<LexicalNodes_60C9F82D, LexicalLinkFields_0A7E9EC0>
+  | SerializedLinkNode<LexicalNodes_60C9F82D, LexicalLinkFields_0A7E9EC0>
   | SerializedRelationshipNode<
       | 'relation'
       | 'audio'
@@ -188,6 +192,9 @@ export interface Config {
     'admin-thumbnail-with-search-queries': AdminThumbnailWithSearchQuery;
     'admin-thumbnail-size': AdminThumbnailSize;
     'admin-upload-control': AdminUploadControl;
+    'admin-upload-file-preview-single': AdminUploadFilePreviewSingle;
+    'admin-upload-file-preview-map': AdminUploadFilePreviewMap;
+    'file-preview': FilePreview;
     'no-files-required': NoFilesRequired;
     'relation-to-no-files-required': RelationToNoFilesRequired;
     'optional-file': OptionalFile;
@@ -211,6 +218,7 @@ export interface Config {
     'media-without-delete-access': MediaWithoutDeleteAccess;
     'media-with-image-size-admin-props': MediaWithImageSizeAdminProp;
     'prefix-media': PrefixMedia;
+    'media-with-fields': MediaWithField;
     users: User;
     'payload-mcp-api-keys': PayloadMcpApiKey;
     'payload-kv': PayloadKv;
@@ -258,6 +266,9 @@ export interface Config {
     'admin-thumbnail-with-search-queries': AdminThumbnailWithSearchQueriesSelect<false> | AdminThumbnailWithSearchQueriesSelect<true>;
     'admin-thumbnail-size': AdminThumbnailSizeSelect<false> | AdminThumbnailSizeSelect<true>;
     'admin-upload-control': AdminUploadControlSelect<false> | AdminUploadControlSelect<true>;
+    'admin-upload-file-preview-single': AdminUploadFilePreviewSingleSelect<false> | AdminUploadFilePreviewSingleSelect<true>;
+    'admin-upload-file-preview-map': AdminUploadFilePreviewMapSelect<false> | AdminUploadFilePreviewMapSelect<true>;
+    'file-preview': FilePreviewSelect<false> | FilePreviewSelect<true>;
     'no-files-required': NoFilesRequiredSelect<false> | NoFilesRequiredSelect<true>;
     'relation-to-no-files-required': RelationToNoFilesRequiredSelect<false> | RelationToNoFilesRequiredSelect<true>;
     'optional-file': OptionalFileSelect<false> | OptionalFileSelect<true>;
@@ -281,6 +292,7 @@ export interface Config {
     'media-without-delete-access': MediaWithoutDeleteAccessSelect<false> | MediaWithoutDeleteAccessSelect<true>;
     'media-with-image-size-admin-props': MediaWithImageSizeAdminPropsSelect<false> | MediaWithImageSizeAdminPropsSelect<true>;
     'prefix-media': PrefixMediaSelect<false> | PrefixMediaSelect<true>;
+    'media-with-fields': MediaWithFieldsSelect<false> | MediaWithFieldsSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-mcp-api-keys': PayloadMcpApiKeysSelect<false> | PayloadMcpApiKeysSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
@@ -1389,7 +1401,7 @@ export interface Uploads1 {
   singleUpload?: (string | null) | Uploads2;
   hasManyThumbnailUpload?: (string | AdminThumbnailSize)[] | null;
   singleThumbnailUpload?: (string | null) | AdminThumbnailSize;
-  richText?: LexicalRichText<LexicalNodes_7A11A510> | null;
+  richText?: LexicalRichText<LexicalNodes_60C9F82D> | null;
   updatedAt: string;
   createdAt: string;
   url?: string | null;
@@ -1530,6 +1542,60 @@ export interface AdminUploadControl {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "admin-upload-file-preview-single".
+ */
+export interface AdminUploadFilePreviewSingle {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "admin-upload-file-preview-map".
+ */
+export interface AdminUploadFilePreviewMap {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "file-preview".
+ */
+export interface FilePreview {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "no-files-required".
@@ -1925,6 +1991,243 @@ export interface PrefixMedia {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media-with-fields".
+ */
+export interface MediaWithField {
+  id: string;
+  title: string;
+  description?: string | null;
+  altText?: string | null;
+  caption?: string | null;
+  credit?: string | null;
+  source?: string | null;
+  category?: ('Nature' | 'Architecture' | 'People' | 'Abstract' | 'Technology') | null;
+  tags?: string[] | null;
+  featured?: boolean | null;
+  photographer?: string | null;
+  priority?: ('Low' | 'Medium' | 'High') | null;
+  shootDate?: string | null;
+  location?: {
+    city?: string | null;
+    country?: string | null;
+  };
+  dimensions?: {
+    widthCm?: number | null;
+    heightCm?: number | null;
+  };
+  colorProfile?: ('sRGB' | 'Adobe RGB' | 'ProPhoto RGB' | 'CMYK') | null;
+  license?: ('All Rights Reserved' | 'CC BY' | 'CC BY-SA' | 'CC BY-NC' | 'Public Domain') | null;
+  licenseUrl?: string | null;
+  notes?: string | null;
+  rating?: number | null;
+  exifData?: {
+    camera?: string | null;
+    lens?: string | null;
+    iso?: number | null;
+    aperture?: string | null;
+    shutterSpeed?: string | null;
+  };
+  published?: boolean | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+  sizes?: {
+    thumbnail?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    card?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    hero?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel1?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel2?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel3?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel4?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel5?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel6?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel7?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel8?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel9?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel10?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel11?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel12?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel13?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel14?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel15?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel16?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel17?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel18?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel19?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    carousel20?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+  };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -2151,6 +2454,18 @@ export interface PayloadLockedDocument {
         relationTo: 'admin-upload-control';
         value: string | AdminUploadControl;
       } | null)
+    | ({
+        relationTo: 'admin-upload-file-preview-single';
+        value: string | AdminUploadFilePreviewSingle;
+      } | null)
+    | ({
+        relationTo: 'admin-upload-file-preview-map';
+        value: string | AdminUploadFilePreviewMap;
+      } | null)
+    | ({
+        relationTo: 'file-preview';
+        value: string | FilePreview;
+      } | null)
     | ({
         relationTo: 'no-files-required';
         value: string | NoFilesRequired;
@@ -2243,6 +2558,10 @@ export interface PayloadLockedDocument {
         relationTo: 'prefix-media';
         value: string | PrefixMedia;
       } | null)
+    | ({
+        relationTo: 'media-with-fields';
+        value: string | MediaWithField;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -3565,10 +3884,9 @@ export interface AdminUploadControlSelect<T extends boolean = true> {
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "no-files-required_select".
+ * via the `definition` "admin-upload-file-preview-single_select".
  */
-export interface NoFilesRequiredSelect<T extends boolean = true> {
-  title?: T;
+export interface AdminUploadFilePreviewSingleSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
   url?: T;
@@ -3583,19 +3901,9 @@ export interface NoFilesRequiredSelect<T extends boolean = true> {
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "relation-to-no-files-required_select".
- */
-export interface RelationToNoFilesRequiredSelect<T extends boolean = true> {
-  title?: T;
-  uploadField?: T;
-  updatedAt?: T;
-  createdAt?: T;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "optional-file_select".
+ * via the `definition` "admin-upload-file-preview-map_select".
  */
-export interface OptionalFileSelect<T extends boolean = true> {
+export interface AdminUploadFilePreviewMapSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
   url?: T;
@@ -3610,7 +3918,69 @@ export interface OptionalFileSelect<T extends boolean = true> {
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "required-file_select".
+ * via the `definition` "file-preview_select".
+ */
+export interface FilePreviewSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "no-files-required_select".
+ */
+export interface NoFilesRequiredSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "relation-to-no-files-required_select".
+ */
+export interface RelationToNoFilesRequiredSelect<T extends boolean = true> {
+  title?: T;
+  uploadField?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "optional-file_select".
+ */
+export interface OptionalFileSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "required-file_select".
  */
 export interface RequiredFileSelect<T extends boolean = true> {
   updatedAt?: T;
@@ -3981,6 +4351,296 @@ export interface PrefixMediaSelect<T extends boolean = true> {
   focalX?: T;
   focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media-with-fields_select".
+ */
+export interface MediaWithFieldsSelect<T extends boolean = true> {
+  title?: T;
+  description?: T;
+  altText?: T;
+  caption?: T;
+  credit?: T;
+  source?: T;
+  category?: T;
+  tags?: T;
+  featured?: T;
+  photographer?: T;
+  priority?: T;
+  shootDate?: T;
+  location?:
+    | T
+    | {
+        city?: T;
+        country?: T;
+      };
+  dimensions?:
+    | T
+    | {
+        widthCm?: T;
+        heightCm?: T;
+      };
+  colorProfile?: T;
+  license?: T;
+  licenseUrl?: T;
+  notes?: T;
+  rating?: T;
+  exifData?:
+    | T
+    | {
+        camera?: T;
+        lens?: T;
+        iso?: T;
+        aperture?: T;
+        shutterSpeed?: T;
+      };
+  published?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+  sizes?:
+    | T
+    | {
+        thumbnail?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        card?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        hero?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel1?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel2?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel3?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel4?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel5?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel6?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel7?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel8?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel9?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel10?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel11?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel12?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel13?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel14?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel15?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel16?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel17?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel18?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel19?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        carousel20?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+      };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".
diff --git a/test/uploads/seed.ts b/test/uploads/seed.ts
index 431d6163d29..e72233a9e77 100644
--- a/test/uploads/seed.ts
+++ b/test/uploads/seed.ts
@@ -1,4 +1,4 @@
-import type { CollectionSlug, Payload } from 'payload'
+import type { CollectionSlug, Payload, RequiredDataFromCollectionSlug } from 'payload'
 
 import path from 'path'
 import { getFileByPath } from 'payload'
@@ -7,9 +7,13 @@ import { fileURLToPath } from 'url'
 import { devUser } from '../credentials.js'
 import { AdminThumbnailSize } from './collections/AdminThumbnailSize/index.js'
 import {
+  adminUploadFilePreviewMapSlug,
+  adminUploadFilePreviewSingleSlug,
   animatedTypeMedia,
   audioSlug,
+  filePreviewSlug,
   mediaSlug,
+  mediaWithFieldsSlug,
   mediaWithoutDeleteAccessSlug,
   relationPreviewSlug,
   relationSlug,
@@ -205,4 +209,258 @@ export const seed = async (payload: Payload) => {
       data,
     })
   }
+
+  // Seed filePreview single collection — one image and one audio doc
+  const pdfFilePath = path.resolve(dirname, './test-pdf.pdf')
+  const pdfFile = await getFileByPath(pdfFilePath)
+
+  // PDF and video in the media collection (which has no custom filePreview) so the file manager's
+  // built-in previews — a browser iframe for PDFs and a native player for video/audio — are
+  // exercised alongside the audio doc seeded into media above.
+  await payload.create({
+    collection: mediaSlug,
+    data: {},
+    file: pdfFile,
+  })
+
+  const videoFilePath = path.resolve(dirname, './christmas-mariachi-in-guadalajara.mp4')
+  const videoFile = await getFileByPath(videoFilePath)
+
+  await payload.create({
+    collection: mediaSlug,
+    data: {},
+    file: videoFile,
+  })
+
+  // Seed media-with-fields with one of each supported file type, every field filled in and the
+  // content derived from the filename. The local API used here bypasses the 2 MB HTTP upload limit.
+  // Filenames are prefixed because this collection shares its staticDir with the media collection.
+  const horizontalSquaresFile = await getFileByPath(
+    path.resolve(dirname, './horizontal-squares.jpg'),
+  )
+
+  const mediaWithFieldsDocs: Array<{
+    data: RequiredDataFromCollectionSlug<typeof mediaWithFieldsSlug>
+    file: Awaited<ReturnType<typeof getFileByPath>>
+  }> = [
+    {
+      file: videoFile,
+      data: {
+        title: 'Christmas Mariachi in Guadalajara',
+        altText: 'Mariachi band performing on a festive stage in Guadalajara',
+        caption: 'Christmas mariachi playing in the streets of Guadalajara',
+        category: 'People',
+        colorProfile: 'sRGB',
+        credit: 'Field Recordings Co.',
+        description:
+          'A festive mariachi performance filmed in Guadalajara during the Christmas season.',
+        dimensions: { heightCm: 108, widthCm: 192 },
+        exifData: {
+          aperture: 'f/2.8',
+          camera: 'Sony A7 IV',
+          iso: 3200,
+          lens: '24-70mm f/2.8',
+          shutterSpeed: '1/50',
+        },
+        featured: true,
+        license: 'CC BY',
+        licenseUrl: 'https://creativecommons.org/licenses/by/4.0/',
+        location: { city: 'Guadalajara', country: 'Mexico' },
+        notes:
+          'Seeded from christmas-mariachi-in-guadalajara.mp4 to exercise the built-in video preview.',
+        photographer: 'Alejandro Hernández',
+        priority: 'High',
+        published: true,
+        rating: 5,
+        shootDate: '2024-12-24T20:00:00.000Z',
+        source: 'https://example.com/christmas-mariachi-in-guadalajara',
+        tags: ['christmas', 'mariachi', 'guadalajara', 'music', 'video'],
+      },
+    },
+    {
+      file: pdfFile,
+      data: {
+        title: 'Test PDF',
+        altText: 'Test PDF document cover page',
+        caption: 'Test PDF document',
+        category: 'Technology',
+        colorProfile: 'CMYK',
+        credit: 'Payload',
+        description:
+          'A sample PDF document used to exercise the built-in PDF preview (browser iframe).',
+        dimensions: { heightCm: 29.7, widthCm: 21 },
+        exifData: { aperture: 'N/A', camera: 'N/A', iso: 0, lens: 'N/A', shutterSpeed: 'N/A' },
+        featured: false,
+        license: 'All Rights Reserved',
+        licenseUrl: 'https://example.com/licenses/test-pdf',
+        location: { city: 'San Francisco', country: 'United States' },
+        notes: 'Seeded from test-pdf.pdf to exercise the built-in PDF preview.',
+        photographer: 'Payload Docs Team',
+        priority: 'Medium',
+        published: true,
+        rating: 3,
+        shootDate: '2024-01-15T09:00:00.000Z',
+        source: 'https://example.com/test-pdf',
+        tags: ['pdf', 'document', 'test'],
+      },
+    },
+    {
+      file: audioFile,
+      data: {
+        title: 'Audio',
+        altText: 'Audio waveform',
+        caption: 'Audio clip',
+        category: 'Abstract',
+        colorProfile: 'sRGB',
+        credit: 'Sound Library',
+        description:
+          'A short audio clip used to exercise the built-in native audio player preview.',
+        dimensions: { heightCm: 0, widthCm: 0 },
+        exifData: { aperture: 'N/A', camera: 'Zoom H6', iso: 0, lens: 'N/A', shutterSpeed: 'N/A' },
+        featured: false,
+        license: 'CC BY-SA',
+        licenseUrl: 'https://creativecommons.org/licenses/by-sa/4.0/',
+        location: { city: 'Berlin', country: 'Germany' },
+        notes: 'Seeded from audio.mp3 to exercise the built-in audio preview.',
+        photographer: 'Sound Recordist',
+        priority: 'Low',
+        published: true,
+        rating: 4,
+        shootDate: '2023-06-01T12:00:00.000Z',
+        source: 'https://example.com/audio',
+        tags: ['audio', 'sound', 'mp3'],
+      },
+    },
+    {
+      file: horizontalSquaresFile,
+      data: {
+        title: 'Horizontal Squares',
+        altText: 'Rows of horizontal squares forming an abstract pattern',
+        caption: 'Horizontal squares pattern',
+        category: 'Abstract',
+        colorProfile: 'Adobe RGB',
+        credit: 'Studio Abstract',
+        description: 'An abstract composition of horizontal squares.',
+        dimensions: { heightCm: 30, widthCm: 40 },
+        exifData: {
+          aperture: 'f/8',
+          camera: 'Canon EOS R5',
+          iso: 100,
+          lens: 'RF 50mm f/1.8 STM',
+          shutterSpeed: '1/250',
+        },
+        featured: true,
+        license: 'CC BY-NC',
+        licenseUrl: 'https://creativecommons.org/licenses/by-nc/4.0/',
+        location: { city: 'New York', country: 'United States' },
+        notes: 'Seeded from horizontal-squares.jpg.',
+        photographer: 'Jamie Doe',
+        priority: 'Medium',
+        published: true,
+        rating: 4,
+        shootDate: '2024-03-10T14:30:00.000Z',
+        source: 'https://example.com/horizontal-squares',
+        tags: ['abstract', 'squares', 'pattern', 'geometric'],
+      },
+    },
+    {
+      file: imageFile,
+      data: {
+        title: 'Image',
+        altText: 'Sample PNG image',
+        caption: 'Sample image',
+        category: 'Technology',
+        colorProfile: 'sRGB',
+        credit: 'Payload',
+        description: 'A sample PNG image.',
+        dimensions: { heightCm: 30, widthCm: 30 },
+        exifData: { aperture: 'N/A', camera: 'N/A', iso: 0, lens: 'N/A', shutterSpeed: 'N/A' },
+        featured: false,
+        license: 'Public Domain',
+        licenseUrl: 'https://example.com/licenses/public-domain',
+        location: { city: 'Denver', country: 'United States' },
+        notes: 'Seeded from image.png.',
+        photographer: 'Payload',
+        priority: 'Medium',
+        published: true,
+        rating: 3,
+        shootDate: '2024-02-20T10:00:00.000Z',
+        source: 'https://example.com/image',
+        tags: ['image', 'png', 'sample'],
+      },
+    },
+  ]
+
+  for (const { data, file } of mediaWithFieldsDocs) {
+    await payload.create({
+      collection: mediaWithFieldsSlug,
+      data,
+      file: { ...file, name: `with-fields-${file?.name}` } as File,
+    })
+  }
+
+  await payload.create({
+    collection: adminUploadFilePreviewSingleSlug,
+    data: {},
+    file: {
+      ...imageFile,
+      name: `single-preview-image-${imageFile?.name}`,
+    } as File,
+  })
+
+  await payload.create({
+    collection: adminUploadFilePreviewSingleSlug,
+    data: {},
+    file: {
+      ...audioFile,
+      name: `single-preview-audio-${audioFile?.name}`,
+    } as File,
+  })
+
+  // Seed filePreview map collection — one image (no match), one PDF (exact), one audio (wildcard)
+  await payload.create({
+    collection: adminUploadFilePreviewMapSlug,
+    data: {},
+    file: {
+      ...imageFile,
+      name: `map-preview-image-${imageFile?.name}`,
+    } as File,
+  })
+
+  await payload.create({
+    collection: adminUploadFilePreviewMapSlug,
+    data: {},
+    file: {
+      ...pdfFile,
+      name: `map-preview-pdf-${pdfFile?.name}`,
+    } as File,
+  })
+
+  await payload.create({
+    collection: adminUploadFilePreviewMapSlug,
+    data: {},
+    file: {
+      ...audioFile,
+      name: `map-preview-audio-${audioFile?.name}`,
+    } as File,
+  })
+
+  // Seed file-preview collection — image and audio to exercise the switch-case component
+  await payload.create({
+    collection: filePreviewSlug,
+    data: {},
+    file: {
+      ...imageFile,
+      name: `file-preview-image-${imageFile?.name}`,
+    } as File,
+  })
+
+  await payload.create({
+    collection: filePreviewSlug,
+    data: {},
+    file: {
+      ...audioFile,
+      name: `file-preview-audio-${audioFile?.name}`,
+    } as File,
+  })
 }
diff --git a/test/uploads/shared.ts b/test/uploads/shared.ts
index 64ec037395c..57154fce39b 100644
--- a/test/uploads/shared.ts
+++ b/test/uploads/shared.ts
@@ -49,3 +49,7 @@ export const uploads2Slug = 'uploads-2'
 export const noFilesRequiredSlug = 'no-files-required'
 export const relationToNoFilesRequiredSlug = 'relation-to-no-files-required'
 export const prefixMediaSlug = 'prefix-media'
+export const mediaWithFieldsSlug = 'media-with-fields'
+export const adminUploadFilePreviewSingleSlug = 'admin-upload-file-preview-single'
+export const adminUploadFilePreviewMapSlug = 'admin-upload-file-preview-map'
+export const filePreviewSlug = 'file-preview'