feat: allows admin thumbnail to be set programmatically

payloadcms · Mar 14, 2021 · b6a9fe4 · b6a9fe4
1 parent 65c81c7
commit b6a9fe4
Show file tree

Hide file tree

Showing 17 changed files with 85 additions and 76 deletions.
diff --git a/demo/collections/Media.ts b/demo/collections/Media.ts
@@ -15,7 +15,7 @@ const Media: PayloadCollectionConfig = {
   upload: {
     staticURL: '/media',
     staticDir: './media',
-    adminThumbnail: 'mobile',
+    adminThumbnail: ({ doc }) => `/media/${doc.filename}`,
     imageSizes: [
       {
         name: 'tablet',

diff --git a/src/admin/components/elements/FileDetails/index.tsx b/src/admin/components/elements/FileDetails/index.tsx
@@ -12,17 +12,26 @@ import './index.scss';
 const baseClass = 'file-details';
 
 const FileDetails: React.FC<Props> = (props) => {
+  const {
+    doc,
+    collection,
+    handleRemove,
+  } = props;
+
+  const {
+    upload: {
+      staticURL,
+    },
+  } = collection;
+
   const {
     filename,
-    mimeType,
     filesize,
-    staticURL,
-    adminThumbnail,
-    sizes,
-    handleRemove,
     width,
     height,
-  } = props;
+    mimeType,
+    sizes,
+  } = doc;
 
   const [moreInfoOpen, setMoreInfoOpen] = useState(false);
 
@@ -31,18 +40,18 @@ const FileDetails: React.FC<Props> = (props) => {
   return (
     <div className={baseClass}>
       <header>
-        <Thumbnail {...{
-          mimeType, adminThumbnail, sizes, staticURL, filename,
-        }}
+        <Thumbnail
+          doc={doc}
+          collection={collection}
         />
         <div className={`${baseClass}__main-detail`}>
           <Meta
             staticURL={staticURL}
-            filename={filename}
-            filesize={filesize}
-            width={width}
-            height={height}
-            mimeType={mimeType}
+            filename={filename as string}
+            filesize={filesize as number}
+            width={width as number}
+            height={height as number}
+            mimeType={mimeType as string}
           />
           {hasSizes && (
             <Button

diff --git a/src/admin/components/elements/FileDetails/types.ts b/src/admin/components/elements/FileDetails/types.ts
@@ -1,13 +1,7 @@
-import { FileSizes } from '../../../../uploads/types';
+import { CollectionConfig } from '../../../../collections/config/types';
 
 export type Props = {
-  filename: string,
-  mimeType: string,
-  filesize: number,
-  staticURL: string,
-  width?: number,
-  height?: number,
-  sizes?: FileSizes,
-  adminThumbnail?: string,
+  collection: CollectionConfig
+  doc: Record<string, unknown>
   handleRemove?: () => void,
 }
diff --git a/src/admin/components/elements/Thumbnail/index.tsx b/src/admin/components/elements/Thumbnail/index.tsx
@@ -10,17 +10,17 @@ const baseClass = 'thumbnail';
 
 const Thumbnail: React.FC<Props> = (props) => {
   const {
-    filename,
-    mimeType,
-    staticURL,
-    sizes,
-    adminThumbnail,
+    doc,
+    doc: {
+      filename,
+    },
+    collection,
     size,
   } = props;
 
   const { serverURL } = useConfig();
 
-  const thumbnail = getThumbnail(mimeType, staticURL, filename, sizes, adminThumbnail);
+  const thumbnail = getThumbnail(collection, doc);
 
   const classes = [
     baseClass,
@@ -32,7 +32,7 @@ const Thumbnail: React.FC<Props> = (props) => {
       {thumbnail && (
         <img
           src={`${serverURL}${thumbnail}`}
-          alt={filename}
+          alt={filename as string}
         />
       )}
       {!thumbnail && (

diff --git a/src/admin/components/elements/Thumbnail/types.ts b/src/admin/components/elements/Thumbnail/types.ts
@@ -1,10 +1,7 @@
-import { FileSizes } from '../../../../uploads/types';
+import { CollectionConfig } from '../../../../collections/config/types';
 
 export type Props = {
-  filename: string,
-  sizes?: FileSizes
-  adminThumbnail?: string,
-  mimeType?: string,
-  staticURL: string,
+  doc: Record<string, unknown>
+  collection: CollectionConfig
   size?: 'small' | 'medium' | 'large' | 'expand',
 }
diff --git a/src/admin/components/elements/UploadCard/index.tsx b/src/admin/components/elements/UploadCard/index.tsx
@@ -10,15 +10,8 @@ const baseClass = 'upload-card';
 const UploadCard: React.FC<Props> = (props) => {
   const {
     onClick,
-    mimeType,
-    sizes,
-    filename,
-    collection: {
-      upload: {
-        adminThumbnail,
-        staticURL,
-      } = {},
-    } = {},
+    doc,
+    collection,
   } = props;
 
   const classes = [
@@ -33,12 +26,11 @@ const UploadCard: React.FC<Props> = (props) => {
     >
       <Thumbnail
         size="expand"
-        {...{
-          mimeType, adminThumbnail, sizes, staticURL, filename,
-        }}
+        doc={doc}
+        collection={collection}
       />
       <div className={`${baseClass}__filename`}>
-        {filename}
+        {doc?.filename}
       </div>
     </div>
   );

diff --git a/src/admin/components/elements/UploadCard/types.ts b/src/admin/components/elements/UploadCard/types.ts
@@ -1,11 +1,7 @@
 import { CollectionConfig } from '../../../../collections/config/types';
-import { FileSizes } from '../../../../uploads/types';
 
 export type Props = {
   collection: CollectionConfig,
-  id: string,
-  filename: string,
-  mimeType: string,
-  sizes?: FileSizes,
+  doc: Record<string, unknown>
   onClick?: () => void,
 }
diff --git a/src/admin/components/elements/UploadGallery/index.tsx b/src/admin/components/elements/UploadGallery/index.tsx
@@ -9,14 +9,13 @@ const baseClass = 'upload-gallery';
 const UploadGallery: React.FC<Props> = (props) => {
   const { docs, onCardClick, collection } = props;
 
-
   if (docs && docs.length > 0) {
     return (
       <ul className={baseClass}>
         {docs.map((doc, i) => (
           <li key={i}>
             <UploadCard
-              {...doc as {id: string, filesize: number, mimeType: string, filename: string}}
+              doc={doc}
               {...{ collection }}
               onClick={() => onCardClick(doc)}
             />

diff --git a/src/admin/components/elements/UploadGallery/types.ts b/src/admin/components/elements/UploadGallery/types.ts
@@ -1,7 +1,7 @@
 import { CollectionConfig } from '../../../../collections/config/types';
 
 export type Props = {
-    docs?: unknown[],
+    docs?: Record<string, unknown>[],
     collection: CollectionConfig,
     onCardClick: (doc) => void,
 }
diff --git a/src/admin/components/forms/field-types/Upload/Add/index.tsx b/src/admin/components/forms/field-types/Upload/Add/index.tsx
@@ -65,7 +65,7 @@ const AddUploadModal: React.FC<Props> = (props) => {
             />
           </header>
           <Upload
-            {...collection.upload}
+            collection={collection}
           />
           <NegativeFieldGutterProvider allow>
             <RenderFields

diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
@@ -107,8 +107,8 @@ const Upload: React.FC<Props> = (props) => {
         <React.Fragment>
           {(internalValue && !missingFile) && (
             <FileDetails
-              {...collection.upload}
-              {...internalValue}
+              collection={collection}
+              doc={internalValue}
               handleRemove={() => {
                 setInternalValue(undefined);
                 setValue(null);

diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx
@@ -102,7 +102,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
                 {upload && (
                   <Upload
                     data={data}
-                    {...upload}
+                    collection={collection}
                   />
                 )}
                 <RenderFields

diff --git a/src/admin/components/views/collections/Edit/Upload/index.tsx b/src/admin/components/views/collections/Edit/Upload/index.tsx
@@ -24,7 +24,7 @@ const validate = (value) => {
   return true;
 };
 
-const File: React.FC<Props> = (props) => {
+const Upload: React.FC<Props> = (props) => {
   const inputRef = useRef(null);
   const dropRef = useRef(null);
   const [fileList, setFileList] = useState(undefined);
@@ -35,8 +35,7 @@ const File: React.FC<Props> = (props) => {
 
   const {
     data = {} as Data,
-    adminThumbnail,
-    staticURL,
+    collection,
   } = props;
 
   const { filename } = data;
@@ -140,9 +139,8 @@ const File: React.FC<Props> = (props) => {
       />
       {(filename && !replacingFile) && (
         <FileDetails
-          {...data}
-          staticURL={staticURL}
-          adminThumbnail={adminThumbnail}
+          doc={data}
+          collection={collection}
           handleRemove={() => {
             setReplacingFile(true);
             setFileList(null);
@@ -199,4 +197,4 @@ const File: React.FC<Props> = (props) => {
   );
 };
 
-export default File;
+export default Upload;
diff --git a/src/admin/components/views/collections/Edit/Upload/types.ts b/src/admin/components/views/collections/Edit/Upload/types.ts
@@ -1,3 +1,5 @@
+import { CollectionConfig } from '../../../../../../collections/config/types';
+
 export type Data = {
   filename: string
   mimeType: string
@@ -6,6 +8,6 @@ export type Data = {
 
 export type Props = {
   data?: Data
+  collection: CollectionConfig
   adminThumbnail?: string
-  staticURL: string
 }
diff --git a/src/collections/config/schema.ts b/src/collections/config/schema.ts
@@ -79,7 +79,10 @@ const collectionSchema = joi.object().keys({
     joi.object({
       staticURL: joi.string(),
       staticDir: joi.string(),
-      adminThumbnail: joi.string(),
+      adminThumbnail: joi.alternatives().try(
+        joi.string(),
+        joi.func(),
+      ),
       imageSizes: joi.array().items(
         joi.object().keys({
           name: joi.string(),

diff --git a/src/uploads/getThumbnail.ts b/src/uploads/getThumbnail.ts
@@ -1,8 +1,25 @@
+import { CollectionConfig } from '../collections/config/types';
 import isImage from './isImage';
-import { FileSizes } from './types';
 
-const getThumbnail = (mimeType: string, staticURL: string, filename: string, sizes: FileSizes, adminThumbnail: string): string | boolean => {
-  if (isImage(mimeType)) {
+const getThumbnail = (collection: CollectionConfig, doc: Record<string, unknown>): string | boolean => {
+  const {
+    upload: {
+      staticURL,
+      adminThumbnail,
+    },
+  } = collection;
+
+  const {
+    mimeType,
+    sizes,
+    filename,
+  } = doc;
+
+  if (typeof adminThumbnail === 'function') {
+    return adminThumbnail({ doc });
+  }
+
+  if (isImage(mimeType as string)) {
     if (sizes?.[adminThumbnail]?.filename) {
       return `${staticURL}/${sizes[adminThumbnail].filename}`;
     }

diff --git a/src/uploads/types.ts b/src/uploads/types.ts
@@ -27,19 +27,21 @@ export type ImageSize = {
   height: number,
   crop?: string, // comes from sharp package
 };
+export type GetAdminThumbnail = (args: { doc: Record<string, unknown> }) => string
 
 export type IncomingUploadType = {
   imageSizes?: ImageSize[];
   staticURL?: string;
   staticDir?: string;
-  adminThumbnail?: string;
+  adminThumbnail?: string | GetAdminThumbnail;
 }
 
+
 export type Upload = {
   imageSizes?: ImageSize[]
   staticURL: string
   staticDir: string
-  adminThumbnail?: string
+  adminThumbnail?: string | GetAdminThumbnail
 }
 
 export type File = {