fix(ui): thumbnails when serverURL config is provided (#8124)

Author: paulpopus

packages/ui/src/fields/Upload/HasMany/index.tsx

@@ -62,6 +62,15 @@ export function UploadComponentHasMany(props: Props) {
       >
         {fileDocs.map(({ relationTo, value }, index) => {
           const id = String(value.id)
+          const url: string = value.thumbnailURL || value.url
+          let src: string
+
+          try {
+            src = new URL(url, serverURL).toString()
+          } catch {
+            src = `${serverURL}${url}`
+          }
+
           return (
             <DraggableSortableItem disabled={!isSortable} id={id} key={id}>
               {(draggableSortableItemProps) => (
@@ -100,7 +109,7 @@ export function UploadComponentHasMany(props: Props) {
                       id={id}
                       mimeType={value?.mimeType as string}
                       onRemove={() => removeItem(index)}
-                      src={`${serverURL}${value.url}`}
+                      src={src}
                       withMeta={false}
                       x={value?.width as number}
                       y={value?.height as number}

packages/ui/src/fields/Upload/HasOne/index.tsx

@@ -26,6 +26,15 @@ export function UploadComponentHasOne(props: Props) {
   const { relationTo, value } = fileDoc
   const id = String(value.id)
 
+  const url: string = value.thumbnailURL || value.url
+  let src: string
+
+  try {
+    src = new URL(url, serverURL).toString()
+  } catch {
+    src = `${serverURL}${url}`
+  }
+
   return (
     <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>
       <RelationshipContent
@@ -38,7 +47,7 @@ export function UploadComponentHasOne(props: Props) {
         id={id}
         mimeType={value?.mimeType as string}
         onRemove={onRemove}
-        src={`${serverURL}${value.url}`}
+        src={src}
         x={value?.width as number}
         y={value?.height as number}
       />