#Admin UI Using Local Image URLS instead of Uploadthing

3 messages · Page 1 of 1 (latest)

clever raft
#

I have Payload CMS hosted on Render, and am currently using Uploadthing for images. In the admin UI, when I upload an image, the plugin works. The image shows up on Uploadthing.

However, the admin ui images reference local urls.

Payload and plugins are synced to 3.46.0

My config is below. I think it's right because my images show up on uploadthing. I'm also seeing the uploadthing image keys in the API response.

    uploadthingStorage({
      collections: {
        media: true,
      },
      options: {
        token: process.env.UPLOADTHING_TOKEN,
        acl: 'public-read',
      },
    }),
  ],```

here is my collection:

import type { CollectionConfig } from 'payload'

export const Media: CollectionConfig = {
slug: 'media',
upload: true,
access: {
read: () => true,
},
fields: [
{
name: 'alt',
type: 'text'
},
],
}```

adding this: disableLocalStorage: true doesn't fix it. I still see local urls.

I also tried adding this in the upload object in the media collection config:

adminThumbnail: ({ doc }) => doc?._key ? `https://ixjni1odz7.ufs.sh/f/${doc._key}` : '',
blissful lintelBOT
clever raft
#

I think I figured out part of the issue here. I can update config with the code below and generate a uploadthing url that ends in filename:
https://ixjni1odz7.ufs.sh/f/man-on-phone-evening.jpg

        media: {
          generateFileURL: ({ filename }) => {
            return `https://ixjni1odz7.ufs.sh/f/${filename}`;
          },
        },

But uploadthing image urls use keys instead of filenames. For example:

https://ixjni1odz7.ufs.sh/f/rniK42v9VlibG6oQTCrS15VhGfrIMyHo0wWTYiFE4LBsPq8x

Replacing filename with key above throws this error:
Property 'key' does not exist on type '{ collection: CollectionConfig; filename: string; prefix?: string | undefined; size?: ImageSize | undefined; }'