feat: adds dynamic url field to upload-enabled collections

src/admin/components/elements/FileDetails/Meta/index.tsx

@@ -10,12 +10,12 @@ const baseClass = 'file-meta';
 
 const Meta: React.FC<Props> = (props) => {
   const {
-    filename, filesize, width, height, mimeType, staticURL,
+    filename, filesize, width, height, mimeType, staticURL, url,
   } = props;
 
   const { serverURL } = useConfig();
 
-  const fileURL = `${serverURL}${staticURL}/${filename}`;
+  const fileURL = url || `${serverURL}${staticURL}/${filename}`;
 
   return (
     <div className={baseClass}>

src/admin/components/elements/FileDetails/Meta/types.ts

@@ -6,4 +6,5 @@ export type Props = {
   width?: number,
   height?: number,
   sizes?: unknown,
+  url?: string
 }

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

@@ -31,6 +31,7 @@ const FileDetails: React.FC<Props> = (props) => {
     height,
     mimeType,
     sizes,
+    url,
   } = doc;
 
   const [moreInfoOpen, setMoreInfoOpen] = useState(false);
@@ -52,6 +53,7 @@ const FileDetails: React.FC<Props> = (props) => {
             width={width as number}
             height={height as number}
             mimeType={mimeType as string}
+            url={url as string}
           />
           {hasSizes && (
             <Button
@@ -91,18 +93,24 @@ const FileDetails: React.FC<Props> = (props) => {
           height={moreInfoOpen ? 'auto' : 0}
         >
           <ul className={`${baseClass}__sizes`}>
-            {Object.entries(sizes).map(([key, val]) => (
-              <li key={key}>
-                <div className={`${baseClass}__size-label`}>
-                  {key}
-                </div>
-                <Meta
-                  {...val}
-                  mimeType={mimeType}
-                  staticURL={staticURL}
-                />
-              </li>
-            ))}
+            {Object.entries(sizes).map(([key, val]) => {
+              if (val?.filename) {
+                return (
+                  <li key={key}>
+                    <div className={`${baseClass}__size-label`}>
+                      {key}
+                    </div>
+                    <Meta
+                      {...val}
+                      mimeType={mimeType}
+                      staticURL={staticURL}
+                    />
+                  </li>
+                );
+              }
+
+              return null;
+            })}
           </ul>
         </AnimateHeight>
       )}