fix: svg uploads allowed when glob (#13356)

Builds on top of #13276 and
allows images/* to also parse and accept svg files correctly.

Author: JarrodMFlesch

packages/payload/src/uploads/checkFileRestrictions.ts

@@ -75,7 +75,9 @@ export const checkFileRestrictions = async ({
     // Handle SVG files that are detected as XML due to <?xml declarations
     if (
       detected?.mime === 'application/xml' &&
-      configMimeTypes.some((type) => type.includes('svg')) &&
+      configMimeTypes.some(
+        (type) => type.includes('image/') && (type.includes('svg') || type === 'image/*'),
+      ) &&
       detectSvgFromXml(file.data)
     ) {
       detected = { ext: 'svg' as any, mime: 'image/svg+xml' as any }

test/uploads/.gitignore

@@ -3,5 +3,10 @@ focal-no-sizes
 media
 uploads
 versions
+with-any-image-type
+with-meta-data
+with-only-jpeg-meta-data
+without-meta-data
+svg-only
 /media-gif
 /custom-file-name-media

test/uploads/collections/AnyImageType/index.ts

@@ -0,0 +1,20 @@
+import type { CollectionConfig } from 'payload'
+
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { anyImagesSlug } from '../../shared.js'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export const AnyImageTypeCollection: CollectionConfig = {
+  slug: anyImagesSlug,
+  upload: {
+    staticDir: path.resolve(dirname, '../../with-any-image-type'),
+    mimeTypes: ['image/*'],
+  },
+  admin: {
+    enableRichTextRelationship: false,
+  },
+  fields: [],
+}

test/uploads/config.ts

@@ -11,6 +11,7 @@ import { AdminThumbnailFunction } from './collections/AdminThumbnailFunction/ind
 import { AdminThumbnailSize } from './collections/AdminThumbnailSize/index.js'
 import { AdminThumbnailWithSearchQueries } from './collections/AdminThumbnailWithSearchQueries/index.js'
 import { AdminUploadControl } from './collections/AdminUploadControl/index.js'
+import { AnyImageTypeCollection } from './collections/AnyImageType/index.js'
 import { BulkUploadsCollection } from './collections/BulkUploads/index.js'
 import { CustomUploadFieldCollection } from './collections/CustomUploadField/index.js'
 import { FileMimeType } from './collections/FileMimeType/index.js'
@@ -713,6 +714,7 @@ export default buildConfigWithDefaults({
     },
     Uploads1,
     Uploads2,
+    AnyImageTypeCollection,
     AdminThumbnailFunction,
     AdminThumbnailWithSearchQueries,
     AdminThumbnailSize,

test/uploads/int.spec.ts

@@ -14,6 +14,7 @@ import { initPayloadInt } from '../helpers/initPayloadInt.js'
 import { createStreamableFile } from './createStreamableFile.js'
 import {
   allowListMediaSlug,
+  anyImagesSlug,
   enlargeSlug,
   focalNoSizesSlug,
   focalOnlySlug,
@@ -385,6 +386,38 @@ describe('Collections - Uploads', () => {
 
         expect(await fileExists(path.join(expectedPath, doc.filename))).toBe(true)
       })
+
+      it('should create documents when passing file', async () => {
+        const expectedPath = path.join(dirname, './with-any-image-type')
+
+        const svgFilePath = path.resolve(dirname, './svgWithXml.svg')
+        const fileBuffer = fs.readFileSync(svgFilePath)
+        const doc = await payload.create({
+          collection: anyImagesSlug as CollectionSlug,
+          data: {},
+          file: {
+            data: fileBuffer,
+            mimetype: 'image/svg+xml',
+            name: 'svgWithXml.svg',
+            size: fileBuffer.length,
+          },
+        })
+
+        expect(await fileExists(path.join(expectedPath, doc.filename))).toBe(true)
+      })
+
+      it('should upload svg files', async () => {
+        const expectedPath = path.join(dirname, './with-any-image-type')
+
+        const svgFilePath = path.resolve(dirname, './svgWithXml.svg')
+        const doc = await payload.create({
+          collection: anyImagesSlug as CollectionSlug,
+          data: {},
+          filePath: svgFilePath,
+        })
+        expect(await fileExists(path.join(expectedPath, doc.filename))).toBe(true)
+        expect(doc.mimeType).toEqual('image/svg+xml')
+      })
     })
 
     describe('update', () => {

test/uploads/shared.ts

@@ -39,3 +39,4 @@ export const bulkUploadsSlug = 'bulk-uploads'
 
 export const fileMimeTypeSlug = 'file-mime-type'
 export const svgOnlySlug = 'svg-only'
+export const anyImagesSlug = 'any-images'