now uses the converted image mimeType for file extension and in the admin interface

src/admin/components/elements/FileDetails/index.tsx

@@ -102,7 +102,7 @@ const FileDetails: React.FC<Props> = (props) => {
                     </div>
                     <Meta
                       {...val}
-                      mimeType={mimeType}
+                      mimeType={val.mimeType}
                       staticURL={staticURL}
                     />
                   </li>

src/uploads/imageResizer.ts

@@ -62,8 +62,9 @@ export default async function resizeAndSave({
 
       req.payloadUploadSizes[desiredSize.name] = bufferObject.data;
 
+      const mimeType = (await fromBuffer(bufferObject.data));
       const outputImage = getOutputImage(savedFilename, desiredSize);
-      const imageNameWithDimensions = createImageName(outputImage, bufferObject);
+      const imageNameWithDimensions = createImageName(outputImage, bufferObject, mimeType.ext);
       const imagePath = `${staticPath}/${imageNameWithDimensions}`;
       const fileAlreadyExists = await fileExists(imagePath);
 
@@ -81,7 +82,7 @@ export default async function resizeAndSave({
         height: bufferObject.info.height,
         filename: imageNameWithDimensions,
         filesize: bufferObject.info.size,
-        mimeType: (await fromBuffer(bufferObject.data)).mime,
+        mimeType: mimeType.mime,
       };
     });
 
@@ -104,8 +105,9 @@ export default async function resizeAndSave({
 function createImageName(
   outputImage: OutputImage,
   bufferObject: { data: Buffer; info: sharp.OutputInfo },
+  extension: string
 ): string {
-  return `${outputImage.name}-${bufferObject.info.width}x${bufferObject.info.height}.${outputImage.extension}`;
+  return `${outputImage.name}-${bufferObject.info.width}x${bufferObject.info.height}.${extension}`;
 }
 
 function needsResize(desiredSize: ImageSize, dimensions: ProbedImageSize): boolean {

test/uploads/config.ts

@@ -57,6 +57,12 @@ export default buildConfig({
             position: 'center',
             formatOptions: { format: 'png', options: { quality: 90 } },
           },
+          {
+            name: 'differentFormatFromMainImage',
+            width: 200,
+            height: null,
+            formatOptions: { format: 'jpg', options: { quality: 90 } },
+          },
           {
             name: 'tablet',
             width: 640,

test/uploads/e2e.spec.ts

@@ -75,13 +75,16 @@ describe('uploads', () => {
     const maintainedAspectRatioMeta = page.locator('.file-details__sizes .file-meta').nth(0);
     await expect(maintainedAspectRatioMeta).toContainText('1024x1024');
 
-    const tabletMeta = page.locator('.file-details__sizes .file-meta').nth(1);
+    const differentFormatFromMainImageMeta = page.locator('.file-details__sizes .file-meta').nth(1);
+    await expect(differentFormatFromMainImageMeta).toContainText('image/jpeg');
+
+    const tabletMeta = page.locator('.file-details__sizes .file-meta').nth(2);
     await expect(tabletMeta).toContainText('640x480');
 
-    const mobileMeta = page.locator('.file-details__sizes .file-meta').nth(2);
+    const mobileMeta = page.locator('.file-details__sizes .file-meta').nth(3);
     await expect(mobileMeta).toContainText('320x240');
 
-    const iconMeta = page.locator('.file-details__sizes .file-meta').nth(3);
+    const iconMeta = page.locator('.file-details__sizes .file-meta').nth(4);
     await expect(iconMeta).toContainText('16x16');
   });
 });

test/uploads/int.spec.ts

@@ -102,6 +102,8 @@ describe('Collections - Uploads', () => {
       expect(doc.mimeType).toEqual('image/png');
       expect(doc.sizes.maintainedAspectRatio.filename).toContain('.png');
       expect(doc.sizes.maintainedAspectRatio.mimeType).toContain('image/png');
+      expect(doc.sizes.differentFormatFromMainImage.filename).toContain('.jpg');
+      expect(doc.sizes.differentFormatFromMainImage.mimeType).toContain('image/jpeg');
     });
 
     it('creates media without storing a file', async () => {