Merge pull request #1757 from payloadcms/fix/#1738-svg-image-sizes

fix: #1738 save image dimensions to svg uploads

src/uploads/generateFileData.ts

@@ -12,6 +12,7 @@ import getSafeFileName from './getSafeFilename';
 import resizeAndSave from './imageResizer';
 import { FileData, FileToSave } from './types';
 import canResizeImage from './canResizeImage';
+import isImage from './isImage';
 
 type Args = {
   config: SanitizedConfig,
@@ -67,7 +68,12 @@ export const generateFileData = async ({
         const shouldResize = canResizeImage(file.mimetype);
         let fsSafeName: string;
         let resized: Sharp | undefined;
-        let dimensions: ProbedImageSize;
+        let dimensions;
+        let fileBuffer;
+        let bufferInfo;
+        let ext;
+        let mime;
+
         if (shouldResize) {
           if (resizeOptions) {
             resized = sharp(file.data)
@@ -76,34 +82,46 @@ export const generateFileData = async ({
           if (formatOptions) {
             resized = (resized ?? sharp(file.data)).toFormat(formatOptions.format, formatOptions.options);
           }
+        }
+
+        if (isImage(file.mimetype)) {
           dimensions = await getImageSize(file);
           fileData.width = dimensions.width;
           fileData.height = dimensions.height;
         }
 
-        const fileBuffer = resized ? (await resized.toBuffer()) : file.data;
-        const bufferInfo = await fromBuffer(fileBuffer);
-        let mime = bufferInfo?.mime ?? file.mimetype;
-        const ext = resized ? bufferInfo.ext : file.name.split('.').pop();
-        const fileSize = fileBuffer.length;
+        if (resized) {
+          fileBuffer = await resized.toBuffer({ resolveWithObject: true });
+          bufferInfo = await fromBuffer(fileBuffer.data);
+
+          mime = bufferInfo.mime;
+          ext = bufferInfo.ext;
+          fileData.width = fileBuffer.info.width;
+          fileData.height = fileBuffer.info.height;
+          fileData.filesize = fileBuffer.data.length;
+        } else {
+          mime = file.mimetype;
+          fileData.filesize = file.size;
+          ext = file.name.split('.').pop();
+        }
+
+        if (mime === 'application/xml' && ext === 'svg') mime = 'image/svg+xml';
+        fileData.mimeType = mime;
+
         const baseFilename = sanitize(file.name.substring(0, file.name.lastIndexOf('.')) || file.name);
         fsSafeName = `${baseFilename}.${ext}`;
 
-        if (mime === 'application/xml' && ext === 'svg') mime = 'image/svg+xml';
-
         if (!overwriteExistingFiles) {
-          fsSafeName = await getSafeFileName(Model, staticPath, fsSafeName);
+          fsSafeName = await getSafeFileName(Model, staticPath, `${baseFilename}.${ext}`);
         }
 
+        fileData.filename = fsSafeName;
+
         filesToSave.push({
           path: `${staticPath}/${fsSafeName}`,
-          buffer: fileBuffer,
+          buffer: fileBuffer?.data || file.data,
         });
 
-        fileData.filename = fsSafeName || (!overwriteExistingFiles ? await getSafeFileName(Model, staticPath, file.name) : file.name);
-        fileData.filesize = fileSize || file.size;
-        fileData.mimeType = mime || (await fromBuffer(file.data)).mime;
-
         if (Array.isArray(imageSizes) && shouldResize) {
           req.payloadUploadSizes = {};
           const { sizeData, sizesToSave } = await resizeAndSave({

src/uploads/imageResizer.ts

@@ -5,13 +5,14 @@ import sharp from 'sharp';
 import { SanitizedCollectionConfig } from '../collections/config/types';
 import { PayloadRequest } from '../express/types';
 import fileExists from './fileExists';
-import { ProbedImageSize } from './getImageSize';
 import { FileSizes, FileToSave, ImageSize } from './types';
 
+type Dimensions = { width?: number, height?: number }
+
 type Args = {
   req: PayloadRequest
   file: Buffer
-  dimensions: ProbedImageSize
+  dimensions: Dimensions
   staticPath: string
   config: SanitizedCollectionConfig
   savedFilename: string
@@ -118,7 +119,7 @@ function createImageName(
   return `${outputImage.name}-${bufferObject.info.width}x${bufferObject.info.height}.${extension}`;
 }
 
-function needsResize(desiredSize: ImageSize, dimensions: ProbedImageSize): boolean {
+function needsResize(desiredSize: ImageSize, dimensions: Dimensions): boolean {
   return (typeof desiredSize.width === 'number' && desiredSize.width <= dimensions.width)
     || (typeof desiredSize.height === 'number' && desiredSize.height <= dimensions.height);
 }