Merge pull request #116 from payloadcms/fix/admin-thumbnail-absolute-url

fix: allows absolute urls within adminThumbnail

src/admin/components/elements/Thumbnail/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { useConfig } from '@payloadcms/config-provider';
 import { Props } from './types';
 import FileGraphic from '../../graphics/File';
-import getThumbnail from '../../../../uploads/getThumbnail';
+import useThumbnail from '../../../hooks/useThumbnail';
 
 import './index.scss';
 
@@ -18,9 +17,7 @@ const Thumbnail: React.FC<Props> = (props) => {
     size,
   } = props;
 
-  const { serverURL } = useConfig();
-
-  const thumbnail = getThumbnail(collection, doc);
+  const thumbnailSRC = useThumbnail(collection, doc);
 
   const classes = [
     baseClass,
@@ -29,13 +26,13 @@ const Thumbnail: React.FC<Props> = (props) => {
 
   return (
     <div className={classes}>
-      {thumbnail && (
+      {thumbnailSRC && (
         <img
-          src={`${serverURL}${thumbnail}`}
+          src={thumbnailSRC}
           alt={filename as string}
         />
       )}
-      {!thumbnail && (
+      {!thumbnailSRC && (
         <FileGraphic />
       )}
     </div>

src/admin/hooks/useThumbnail.ts

@@ -0,0 +1,44 @@
+import { useConfig } from '@payloadcms/config-provider';
+import { CollectionConfig } from '../../collections/config/types';
+import isImage from '../../uploads/isImage';
+
+const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i');
+
+const useThumbnail = (collection: CollectionConfig, doc: Record<string, unknown>): string | false => {
+  const {
+    upload: {
+      staticURL,
+      adminThumbnail,
+    },
+  } = collection;
+
+  const {
+    mimeType,
+    sizes,
+    filename,
+  } = doc;
+
+  const { serverURL } = useConfig();
+
+  if (isImage(mimeType as string)) {
+    if (typeof adminThumbnail === 'function') {
+      const thumbnailURL = adminThumbnail({ doc });
+
+      if (absoluteURLPattern.test(thumbnailURL)) {
+        return thumbnailURL;
+      }
+
+      return `${serverURL}${thumbnailURL}`;
+    }
+
+    if (sizes?.[adminThumbnail]?.filename) {
+      return `${serverURL}${staticURL}/${sizes[adminThumbnail].filename}`;
+    }
+
+    return `${serverURL}${staticURL}/${filename}`;
+  }
+
+  return false;
+};
+
+export default useThumbnail;

src/uploads/getThumbnail.ts

@@ -1,33 +0,0 @@
-import { CollectionConfig } from '../collections/config/types';
-import isImage from './isImage';
-
-const getThumbnail = (collection: CollectionConfig, doc: Record<string, unknown>): string | boolean => {
-  const {
-    upload: {
-      staticURL,
-      adminThumbnail,
-    },
-  } = collection;
-
-  const {
-    mimeType,
-    sizes,
-    filename,
-  } = doc;
-
-  if (isImage(mimeType as string)) {
-    if (typeof adminThumbnail === 'function') {
-      return adminThumbnail({ doc });
-    }
-
-    if (sizes?.[adminThumbnail]?.filename) {
-      return `${staticURL}/${sizes[adminThumbnail].filename}`;
-    }
-
-    return `${staticURL}/${filename}`;
-  }
-
-  return false;
-};
-
-export default getThumbnail;