payloadcms · paulpopus · Jun 15, 2026 · Jun 15, 2026 · Jun 15, 2026 · Jun 16, 2026
diff --git 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
@@ -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
@@ -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',

@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',