Option for globally specifying external image URLs to cloud providers

[hdodov]

I use the official @payloadcms/plugin-cloud-storage plugin to host my images on Amazon S3. I've also set up the adminThumbnail option to load thumbnails directly from S3:

adminThumbnail: ({ doc }) => {
	const media = doc as unknown as MediaType;
	const origin = process.env.PAYLOAD_PUBLIC_S3_URL;
	const prefix = media.prefix;
	const filename = media.sizes.thumb.filename;

	return `${origin}/${prefix}/${filename}`;
},

However, this works only for the src attribute of <img> tags in the admin. Links are not pointing to S3:

And, more importantly, URLs in the JSON API point to the server, as specified in the serverURL option, rather than S3:

{
	"id": "639843d25345827260a06538",
	"alt": "test",
	"prefix": "media",
	"filename": "pexels-lina-kivaka-12238287.jpg",
	"mimeType": "image/jpeg",
	"filesize": 6171902,
	"width": 6700,
	"height": 4471,
	"sizes": {
		"thumb": {
			"width": 350,
			"height": 233,
			"mimeType": "image/jpeg",
			"filesize": 18216,
			"filename": "pexels-lina-kivaka-12238287-350x233.jpg",
			// Not an S3 URL:
			"url": "https://example.com/media/pexels-lina-kivaka-12238287-350x233.jpg"
		}
	},
	"createdAt": "2022-12-13T09:20:18.772Z",
	"updatedAt": "2022-12-13T09:20:18.772Z",
	// Also not an S3 URL:
	"url": "https://example.com/media/pexels-lina-kivaka-12238287.jpg"
}

Ideally, I should be able to specify the URL of my bucket and have Payload use it everywhere, for everything. Otherwise, Payload has to proxy these images, which will unnecessarily increase the server load. The only benefit I can think of is that Payload's auth mechanisms can kick in and deny access, but those images are publicly accessible and that's not relevant.

[jmikrut]

Hey @hdodov — this is the default behaviour of the cloud plugin, but you can actually disable this and have your URLs point directly to your cloud storage if you'd like.

Documented here:
https://github.com/payloadcms/plugin-cloud-storage#payload-access-control

Will you give that a shot and let me know if this resolves what you're looking to do?

[hdodov]

It worked wonderfully! I was able to set it up like so:

payload.config.ts:

export default buildConfig({
	// ...
	plugins: [
		cloudStorage({
			collections: {
				media: {
					prefix: "media",
					adapter: s3Adapter(s3Init),
					disablePayloadAccessControl: true,
					generateFileURL({ prefix, filename }) {
						const origin = process.env.S3_URL;
						return `${origin}/${prefix}/${filename}`;
					},
				},
			},
		}),
	],
	// ...
});

collections/Media.ts:

export const Media: CollectionConfig = {
	slug: "media",
	upload: {
		adminThumbnail: ({ doc }) => {
			const media = doc as unknown as MediaType;
			return `${media.sizes.thumb.url}`;
		},
		imageSizes: [
			{
				name: "thumb",
				width: 175 * 2,
			},
		],
	},
	// ...
};

I also noticed that PAYLOAD_PUBLIC_S3_URL no longer had to be a public variable, because URLs seem to be generated on the backend, so I changed it to simply S3_URL.

The only issue I had is that in the docs you linked, it's not mentioned that when you specify disablePayloadAccessControl: true, you also have to provide generateFileURL. Otherwise, I was getting URLs like that:

http://localhost:3000/admin/collections/undefined/my-s3-bucket/media/pexels-lina-kivaka-12238287-350x233.jpg

Was I not using the plugin correctly, or there's a bug? This undefined seems strange.

[hdodov]

It turned out that I didn't need generateFileURL, as long as I provide the endpoint option. I've described the issue in https://github.com/payloadcms/plugin-cloud-storage/issues/29.