Issue-836 Document Types

src/blocks/Document/Component.tsx

@@ -5,24 +5,58 @@ import { getMediaURL } from '@/utilities/getURL'
 import { isValidRelationship } from '@/utilities/relationships'
 import { getHostnameFromTenant } from '@/utilities/tenancy/getHostnameFromTenant'
 import { cn } from '@/utilities/ui'
+import { FileDown } from 'lucide-react'
+
+// MIME types that browsers can reliably render in an iframe
+const EMBEDDABLE_MIME_TYPES = new Set([
+  'application/pdf',
+  'text/html',
+  'text/plain',
+  'text/xml',
+  'application/xml',
+  'application/vnd.google-earth.kml+xml',
+])
 
 type Props = DocumentBlockProps & {
   isLayoutBlock: boolean
+  // displayAs is present in the block config but absent from generated types until pnpm generate:types is run
+  displayAs?: 'download' | 'embed' | null
 }
 
 export const DocumentBlockComponent = (props: Props) => {
-  const { document, isLayoutBlock = true } = props
+  const { document, displayAs, isLayoutBlock = true } = props
   const { tenant } = useTenant()
 
   if (!isValidRelationship(document) || !document.url) {
     return null
   }
 
   const src = getMediaURL(document.url, null, getHostnameFromTenant(tenant))
+  const filename = document.filename ?? 'Download'
+
+  const isEmbeddable = document.mimeType != null && EMBEDDABLE_MIME_TYPES.has(document.mimeType)
+  const resolvedDisplay = displayAs === 'embed' && isEmbeddable ? 'embed' : 'download'
+
+  if (resolvedDisplay === 'embed') {
+    return (
+      <div className={cn('my-4', { container: isLayoutBlock })}>
+        <iframe src={src} width="100%" height="600px" title="Document" />
+      </div>
+    )
+  }
 
   return (
     <div className={cn('my-4', { container: isLayoutBlock })}>
-      <iframe src={src} width="100%" height="600px" title="Document PDF" />
+      <a
+        href={src}
+        download={filename}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
+      >
+        <FileDown className="h-4 w-4 shrink-0" />
+        <span>{filename}</span>
+      </a>
     </div>
   )
 }

src/blocks/Document/config.ts

@@ -11,5 +11,14 @@ export const DocumentBlock: Block = {
       relationTo: 'documents',
       required: true,
     },
+    {
+      name: 'displayAs',
+      type: 'select',
+      defaultValue: 'download',
+      options: [
+        { label: 'Download Link', value: 'download' },
+        { label: 'Embed (iframe)', value: 'embed' },
+      ],
+    },
   ],
 }

src/collections/Documents/hooks/validateNotImageOrVideo.ts

@@ -0,0 +1,23 @@
+import { APIError, CollectionConfig } from 'payload'
+
+type BeforeOperationHook = Exclude<
+  Exclude<CollectionConfig['hooks'], undefined>['beforeOperation'],
+  undefined
+>[number]
+
+export const validateNotImageOrVideo: BeforeOperationHook = ({ operation, req }) => {
+  if ((operation !== 'create' && operation !== 'update') || !req.file) {
+    return
+  }
+
+  const { mimetype } = req.file
+
+  if (mimetype.startsWith('image/') || mimetype.startsWith('video/')) {
+    throw new APIError(
+      'Images and videos must be uploaded to the Media collection, not Documents.',
+      400,
+      null,
+      true,
+    )
+  }
+}

src/collections/Documents/index.ts

@@ -10,6 +10,7 @@ import path from 'path'
 import { fileURLToPath } from 'url'
 import { prefixFilenameWithTenant } from '../Media/hooks/prefixFilenameWithTenant'
 import { revalidateDocuments, revalidateDocumentsDelete } from './hooks/revalidateDocuments'
+import { validateNotImageOrVideo } from './hooks/validateNotImageOrVideo'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -38,18 +39,9 @@ export const Documents: CollectionConfig = {
   ],
   upload: {
     staticDir: path.resolve(dirname, '../../../public/documents'),
-    mimeTypes: [
-      'application/pdf',
-      'text/x-php',
-      'text/php',
-      'application/xml',
-      'application/octet-stream',
-      'application/vnd.google-earth.kml+xml',
-      '.kml',
-    ],
   },
   hooks: {
-    beforeOperation: [prefixFilenameWithTenant],
+    beforeOperation: [validateNotImageOrVideo, prefixFilenameWithTenant],
     afterChange: [revalidateDocuments],
     afterDelete: [revalidateDocumentsDelete],
   },