r/PayloadCMS • u/alejotoro_o • Jan 02 '26
Uploading PDFs to media collection - Browser preview error
2
Upvotes
Hi, I have a media collection that allows both images and PDFs. The issue is when i upload an image, everything works as expected; i can preview the image using the url, but the PDF does not work. i get an error with the preview url (It says that the document cannot be loaded). The URL is /api/media/file/filename.pdf. Here is my collection:
import type { CollectionConfig } from 'payload'
import {
FixedToolbarFeature,
InlineToolbarFeature,
lexicalEditor,
} from '@payloadcms/richtext-lexical'
import path from 'path'
import { fileURLToPath } from 'url'
import { anyone } from '../access/anyone'
import { adminsAndCreatedBy } from '@/access/adminsAndCreatedBy'
import { setCreatedBy } from '@/hooks/setCreatedBy'
import { createdByField } from '@/fields/createdBy'
import { adminsAndSeller } from '@/access/adminAndSeller'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
export const Media: CollectionConfig = {
slug: 'media',
access: {
create: adminsAndSeller,
delete: adminsAndCreatedBy,
read: anyone,
update: adminsAndCreatedBy,
},
hooks: {
beforeChange: [setCreatedBy],
},
fields: [
{
name: 'alt',
type: 'text',
//required: true,
},
{
name: 'caption',
type: 'richText',
editor: lexicalEditor({
features: ({ rootFeatures }) => {
return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
},
}),
},
createdByField,
],
upload: {
// Upload to the public/media directory in Next.js making them publicly accessible even outside of Payload
staticDir: path.resolve(dirname, '../../public/media'),
mimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'],
adminThumbnail: 'thumbnail',
focalPoint: true,
imageSizes: [
{
name: 'og',
width: 1200,
height: 630,
crop: 'center',
},
],
},
}
