How can I combine Cloudinary colour extraction and AWS Rekognition auto-tagging in my Payload CMS media uploads?

Question

I’m using Payload CMS (v3.35.1) with a Next.js frontend and PostgreSQL on Render. I'm trying to fully integrate Cloudinary for media uploads using @jhb.software/payload-cloudinary-plugin.

I’ve gone through multiple setups and plugin combinations The uploads go to Cloudinary and show up there, but the admin panel crashes with this error:

TypeError: Cannot read properties of null (reading 'replace')
    at adminThumbnail (.../extendUploadCollectionConfig.js:85:46)

This happens even when:

Uploads succeed and Cloudinary URLs are present on the media documents I’ve reverted to a minimal boilerplate Payload setup with only one media collection I've pinned all Payload packages to 3.35.1 for compatibility I’ve tried the official Cloudinary plugin as well as a custom afterChange hook setup I've removed all custom fields, except for one or two like alt or dominantColours I've tried using staticDir, staticURL, and a rewrite rule in next.config.mjs like:

rewrites: async () => [
  { source: '/media/:path*', destination: '/__tmp_media__/:path*' }
]

Current plugin config (in payload.config.ts):

payloadCloudinaryPlugin({
  uploadCollections: ['media'],
  credentials: {
    apiKey: process.env.CLOUDINARY_API_KEY!,
    apiSecret: process.env.CLOUDINARY_API_SECRET!,
  },
  cloudinary: {
    cloudName: process.env.CLOUDINARY_CLOUD_NAME!,
  },
  // staticURL: '/media', // tried this too (but typescript complains)
})

media collection is configured with:

export const Media: CollectionConfig = {
  slug: 'media',
  access: { read: () => true },
  upload: {
    staticDir: '__tmp_media__',
    mimeTypes: ['image/*'],
    imageSizes: [
      { name: 'thumbnail', width: 400, height: 400 },
    ],
  },
  fields: [{ name: 'alt', type: 'text' }],
}

What I'm trying to do:

Let users upload images through admin Store those in Cloudinary Auto-tag and colour-process media post-upload

Has anyone encountered this replace error with the Cloudinary plugin? Has anyone manage to do a setup like this?

the payload-cloudinary-plugin’s uploadOptions only accepts certain options (it errors on categorization / auto_tagging), so I can’t configure both colour + auto-tags at upload time.

If I try to call req.payload.updateOne() in afterChange, I get Postgres foreign-key / null-id errors on the nested colour array.

I also end up with race conditions or hanging transactions when I try to update inside the same hook.

Danny V · Accepted Answer · 2025-05-01 09:20:12Z

0

I actually work for Cloudinary, and while this plugin is third-party (so we can't provide support for it directly), I wanted to provide a workaround.

If this, or any other plugin doesn't support a feature, you could always look into applying the functionality via an Upload Preset instead. In this instance, you should be able to create/update the default upload preset used for API uploads so that it calls the addons you need

answered May 1 at 9:20

Danny V

1064 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I combine Cloudinary colour extraction and AWS Rekognition auto-tagging in my Payload CMS media uploads?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related