S3 Adapter is not setting mime type correctly

[ainsleyclark]

Link to reproduction

No response

Payload Version

3.0.0-beta.76

Node Version

v18.20.2

Next.js Version

15.0.0-canary.53

Describe the Bug

Problem

When a file is uploaded to an S3 provider, the correct ContentType doesn't seem to be attached to the upload. For example, below is a webp file converted by Payload that should have image/webp attached to it.

Headers

As such, when a file is returned from Payload, it doesn't have the correct contentType. You can see in this file: https://cms.sclark.uk/api/media/file/tablet-1024x1171.webp it comes back with the incorrect content type headers, even though the true file type is image/webp.

Collection

import type { CollectionConfig, Field } from 'payload';

export const Media = (
	additionalFields?: Field[],
): CollectionConfig => {
	return {
		slug: 'media',
		access: {
			read: () => true,
		},
		fields: [
			{
				name: 'alt',
				type: 'text',
				required: true,
			},
			...(additionalFields ? additionalFields : []),
		],
		upload: {
			staticDir: 'media',
			imageSizes: [
				// Original Size (for WebP & Avif)
				{
					name: 'webp',
					width: undefined,
					height: undefined,
					formatOptions: {
						format: 'webp',
						options: {
							quality: 80,
						},
					},
				},
				{
					name: 'avif',
					width: undefined,
					height: undefined,
					formatOptions: {
						format: 'avif',
						options: {
							quality: 80,
						},
					},
				},
	                 ],
		},
	};
};

S3 Config

s3Storage({
	enabled: true,
	bucket: env('SPACES_BUCKET', ''),
	acl: 'public-read',
	collections: {
		media: true,
	},
	config: {
		region: 'ams3',
		endpoint: 'https://ams3.digitaloceanspaces.com',
		forcePathStyle: false,
		credentials: {
			accessKeyId: env('SPACES_ACCESS_KEY', ''),
			secretAccessKey: env('SPACES_SECRET_KEY', ''),
		},
	},
}),

Reproduction Steps

Implement config above and upload a WebP file.

Adapters and Plugins

Storage S3

[github-actions[bot]]

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

[ainsleyclark]

Still open. No response.

[treb0r]

I can confirm that this is still an issue.

Specifically I have found that in a collection with an upload field, all images defined in imageSizes will inherit the content-type of the original image. In the example below, all the images will have content-type: image/webp.

export const Media: CollectionConfig = {
  slug: 'media',
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
      required: true,
    },
  ],
  upload: {
    formatOptions: {
      format: 'webp',
    },
    imageSizes: [
      {
        name: `320w`,
        width: 320,
        formatOptions: {
          format: 'avif',
        },
      },
      {
        name: `320w-webp`,
        width: 320,
        formatOptions: {
          format: 'webp',
        },
      },
      {
        name: `640w`,
        width: 640,
        formatOptions: {
          format: 'avif',
        },
      },
      {
        name: `640w-webp`,
        width: 640,
        formatOptions: {
          format: 'webp',
        },
      },
      {
        name: `1200w`,
        width: 1200,
        formatOptions: {
          format: 'avif',
        },
      },
      {
        name: `1200w-webp`,
        width: 1200,
        formatOptions: {
          format: 'webp',
        },
      },
      {
        name: `2400w`,
        width: 2400,
        formatOptions: {
          format: 'avif',
        },
      },
      {
        name: `2400w-webp`,
        width: 2400,
        formatOptions: {
          format: 'webp',
        },
      },
    ],
    adminThumbnail: '320w',
  },
}

Using payload 3.23.0 and @payloadcms/storage-s3 3.23.0

[jnelle]

Same issue here

[jnelle]

works for me with 3.26.0

[ainsleyclark]

@jnelle do you know of any change to the storage plugin that would have fixed this?

I can't see anything.

[jnelle]

Please check the following pr, I think it is also related to your issue.

https://github.com/payloadcms/payload/pull/11436

[ainsleyclark]

This PR looks to change prefix it has nothing to do with mime types?

[6TELOIV]

I can confirm this is happening for storage-azure in 3.24.0; will update tomorrow and see if I can corroborate your observation @jnelle

[Rymar]

I think the problem is here. https://github.com/payloadcms/payload/blob/243cdb19013c38bc914082d61a9db2cb52a3e7ee/packages/payload-cloud/src/utilities/getIncomingFiles.ts#L35

Changing mimeType to mimeType: resizedFileData.mimeType fixes problem for me on S3 Storage Plugin.

[6TELOIV]

@Rymar that looks like it. Would you create a PR for the fix? If not, I don't mind making one

[treb0r]

I am still seeing this issue - is there any hope of a fix?

[frederichoule]

Anyone from Payload can look at the PR and hopefully merge it?

[frederichoule]

Hey @denolfe ! Is there any way to test and merge the PR anytime soon? I'm now up to 10,000 images in my bucket with the wrong mime type.

[cemcatik]

Not only S3, but all storage plugins are on the same boat. Tested https://github.com/payloadcms/payload/pull/11633 in a local patch for GCS and it worked.

[frederichoule]

Hey @jmikrut or @paulpopus or anyone, this issue has been open for a year now, and it's a pretty severe bug affecting a lot of Payload users. Any way to get this going?

[6TELOIV]

I am happy to continue to work on my PR if needed, adding test cases, etc; as the fix is literally 2 lines in 2 files, I didn't think it warranted that. In any case, it's been radio silence over there #11633 so I'm not sure what they need from me to accept the change.

[github-actions[bot]]

🚀 This is included in version v3.63.0

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.