From 51b46d44b0c88387d8b23859129f163b581bf1cc Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 29 Mar 2021 08:39:41 -0400
Subject: [PATCH] fix: allows absolute urls within adminThumbnail

---
 .../components/elements/Thumbnail/index.tsx   | 13 +++---
 src/admin/hooks/useThumbnail.ts               | 44 +++++++++++++++++++
 src/uploads/getThumbnail.ts                   | 33 --------------
 3 files changed, 49 insertions(+), 41 deletions(-)
 create mode 100644 src/admin/hooks/useThumbnail.ts
 delete mode 100644 src/uploads/getThumbnail.ts

diff --git a/src/admin/components/elements/Thumbnail/index.tsx b/src/admin/components/elements/Thumbnail/index.tsx
index abe0436a57..4eb850ec0d 100644
--- a/src/admin/components/elements/Thumbnail/index.tsx
+++ b/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>
diff --git a/src/admin/hooks/useThumbnail.ts b/src/admin/hooks/useThumbnail.ts
new file mode 100644
index 0000000000..d9c504ca66
--- /dev/null
+++ b/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;
diff --git a/src/uploads/getThumbnail.ts b/src/uploads/getThumbnail.ts
deleted file mode 100644
index eb513ab51c..0000000000
--- a/src/uploads/getThumbnail.ts
+++ /dev/null
@@ -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;