fix: should exclude svg files from file buffer mime validation (#14751)

### What?
Fix bug of `svg` files throwing an error when `mimeTypes: ['image/*']`
is set.

### Why?
We recently added an additional mime type check on the buffer however
the `file-buffer` package that we use to detect file type does not
support svgs.

### How?
Updates `expectsDetectableType` logic to exclude svgs.

Fixes #14743

Author: jessrynkar

packages/payload/src/uploads/checkFileRestrictions.ts

@@ -65,13 +65,20 @@ export const checkFileRestrictions = async ({
       ? (uploadConfig as { allowRestrictedFileTypes?: boolean }).allowRestrictedFileTypes
       : false
 
-  const expectsDetectableType = configMimeTypes.some(
-    (type) =>
-      type.startsWith('image/') ||
-      type === 'application/pdf' ||
-      type.startsWith('video/') ||
-      type.startsWith('audio/'),
-  )
+  const expectsDetectableType = (mimeType: string): boolean => {
+    const textBasedTypes = ['/svg', 'image/svg+xml', 'image/x-xbitmap', 'image/x-xpixmap']
+
+    if (textBasedTypes.includes(mimeType)) {
+      return false
+    }
+
+    return (
+      mimeType.startsWith('image/') ||
+      mimeType.startsWith('video/') ||
+      mimeType.startsWith('audio/') ||
+      mimeType === 'application/pdf'
+    )
+  }
 
   // Skip validation if `allowRestrictedFileTypes` is true
   if (allowRestrictedFileTypes) {
@@ -81,20 +88,23 @@ export const checkFileRestrictions = async ({
   // Secondary mimetype check to assess file type from buffer
   if (configMimeTypes.length > 0) {
     let detected = await fileTypeFromBuffer(file.data)
-
-    if (!detected && expectsDetectableType && !useTempFiles) {
-      errors.push(`File buffer returned no detectable MIME type.`)
-    }
+    const typeFromExtension = file.name.split('.').pop() || ''
 
     // Handle SVG files that are detected as XML due to <?xml declarations
     if (
       detected?.mime === 'application/xml' &&
       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 }
+      const isSvg = detectSvgFromXml(file.data)
+      if (isSvg) {
+        detected = { ext: 'svg' as any, mime: 'image/svg+xml' as any }
+      }
+    }
+
+    if (!detected && expectsDetectableType(typeFromExtension) && !useTempFiles) {
+      errors.push(`File buffer returned no detectable MIME type.`)
     }
 
     const passesMimeTypeCheck = detected?.mime && validateMimeType(detected.mime, configMimeTypes)

test/uploads/int.spec.ts

@@ -151,6 +151,24 @@ describe('Collections - Uploads', () => {
         expect(doc.height).toBeDefined()
       })
 
+      it('should upload svg in an image mimetype restricted collection', async () => {
+        const filePath = path.join(dirname, './image.svg')
+        const formData = new FormData()
+        const { file, handle } = await createStreamableFile(filePath)
+        formData.append('file', file)
+
+        const response = await restClient.POST(`/any-images`, {
+          body: formData,
+          file,
+        })
+
+        const { doc } = await response.json()
+        await handle.close()
+
+        expect(response.status).toBe(201)
+        expect(doc.mimeType).toEqual('image/svg+xml')
+      })
+
       it('should have valid image url', async () => {
         const formData = new FormData()
         const filePath = path.join(dirname, './image.svg')