improvement(whitelabeling): add SVG support for logo and wordmark uploads

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload.ts

@@ -3,7 +3,7 @@ import { createLogger } from '@sim/logger'
 
 const logger = createLogger('ProfilePictureUpload')
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
-const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/jpg']
+const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml']
 
 interface UseProfilePictureUploadProps {
   onUpload?: (url: string | null) => void
@@ -41,7 +41,7 @@ export function useProfilePictureUpload({
       return `File "${file.name}" is too large. Maximum size is 5MB.`
     }
     if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-      return `File "${file.name}" is not a supported image format. Please use PNG or JPEG.`
+      return `File "${file.name}" is not a supported image format. Please use PNG, JPEG, or SVG.`
     }
     return null
   }, [])

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -298,7 +298,7 @@ export function WhitelabelingSettings() {
           <div className='grid grid-cols-2 gap-4'>
             <SettingRow
               label='Logo'
-              description='Shown in the collapsed sidebar. Square image recommended (PNG or JPEG, max 5MB).'
+              description='Shown in the collapsed sidebar. Square image recommended (PNG, JPEG, or SVG, max 5MB).'
             >
               <DropZone onDrop={logoUpload.handleFileDrop} className='flex items-center gap-4'>
                 <button
@@ -345,7 +345,7 @@ export function WhitelabelingSettings() {
                 <input
                   ref={logoUpload.fileInputRef}
                   type='file'
-                  accept='image/png,image/jpeg,image/jpg'
+                  accept='image/png,image/jpeg,image/jpg,image/svg+xml'
                   onChange={logoUpload.handleFileChange}
                   className='hidden'
                 />
@@ -354,7 +354,7 @@ export function WhitelabelingSettings() {
 
             <SettingRow
               label='Wordmark'
-              description='Shown in the expanded sidebar. Wide image recommended (PNG or JPEG, max 5MB).'
+              description='Shown in the expanded sidebar. Wide image recommended (PNG, JPEG, or SVG, max 5MB).'
             >
               <DropZone onDrop={wordmarkUpload.handleFileDrop} className='flex items-center gap-4'>
                 <button
@@ -401,7 +401,7 @@ export function WhitelabelingSettings() {
                 <input
                   ref={wordmarkUpload.fileInputRef}
                   type='file'
-                  accept='image/png,image/jpeg,image/jpg'
+                  accept='image/png,image/jpeg,image/jpg,image/svg+xml'
                   onChange={wordmarkUpload.handleFileChange}
                   className='hidden'
                 />