Merge pull request #582 from VitNode/fix/upload_svg_logo

fix: Upload SVG logo using Theme Editor
VitNode · Nov 23, 2024 · 27e0c7b · 27e0c7b
2 parents 013e8af + 68a5f45
commit 27e0c7b
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 34 deletions.
diff --git a/packages/backend/src/core/admin/styles/theme-editor/theme-editor.controller.ts b/packages/backend/src/core/admin/styles/theme-editor/theme-editor.controller.ts
@@ -55,22 +55,42 @@ export class ThemeEditorStylesAdminController {
       new FilesValidationPipe({
         logo_dark: {
           maxSize: 1024 * 1024, // 1 MB
-          acceptMimeType: ['image/png', 'image/jpeg'],
+          acceptMimeType: [
+            'image/png',
+            'image/jpeg',
+            'image/svg+xml',
+            'image/webp',
+          ],
           isOptional: true,
         },
         mobile_logo_dark: {
           maxSize: 1024 * 1024, // 1 MB
-          acceptMimeType: ['image/png', 'image/jpeg'],
+          acceptMimeType: [
+            'image/png',
+            'image/jpeg',
+            'image/svg+xml',
+            'image/webp',
+          ],
           isOptional: true,
         },
         logo_light: {
           maxSize: 1024 * 1024, // 1 MB
-          acceptMimeType: ['image/png', 'image/jpeg'],
+          acceptMimeType: [
+            'image/png',
+            'image/jpeg',
+            'image/svg+xml',
+            'image/webp',
+          ],
           isOptional: true,
         },
         mobile_logo_light: {
           maxSize: 1024 * 1024, // 1 MB
-          acceptMimeType: ['image/png', 'image/jpeg'],
+          acceptMimeType: [
+            'image/png',
+            'image/jpeg',
+            'image/svg+xml',
+            'image/webp',
+          ],
           isOptional: true,
         },
       }),

diff --git a/packages/backend/src/helpers/files/files-helper.service.ts b/packages/backend/src/helpers/files/files-helper.service.ts
@@ -15,6 +15,7 @@ export const acceptMimeTypeImage = [
   'image/webp',
   'image/gif',
   'image/avif',
+  'image/svg+xml',
 ];
 
 export const acceptMimeTypeVideo = ['video/mp4', 'video/webm', 'video/ogg'];

diff --git a/packages/backend/src/main.ts b/packages/backend/src/main.ts
@@ -19,12 +19,19 @@ export const nestjsMainApp = async (app: INestApplication, options?: Args) => {
   const pkg: {
     version: string;
   } = JSON.parse(await readFile(join(process.cwd(), 'package.json'), 'utf-8'));
+  app.enableCors({
+    ...options?.cors,
+    credentials: true,
+    origin: [
+      process.env.NEXT_PUBLIC_FRONTEND_URL ?? 'http://localhost:3000',
+      ...(options?.cors?.origin ?? []),
+    ],
+  });
 
   app.use(cookieParser());
   app.use(
     helmet({
-      contentSecurityPolicy:
-        process.env.NODE_ENV === 'development' ? false : undefined,
+      crossOriginResourcePolicy: { policy: 'cross-origin' },
     }),
   );
 
@@ -48,17 +55,6 @@ export const nestjsMainApp = async (app: INestApplication, options?: Args) => {
     }),
   );
 
-  app.enableCors({
-    ...options?.cors,
-    credentials: true,
-    origin: [
-      process.env.NEXT_PUBLIC_FRONTEND_URL
-        ? process.env.NEXT_PUBLIC_FRONTEND_URL
-        : 'http://localhost:3000',
-      ...(options?.cors?.origin ?? []),
-    ],
-  });
-
   const port = Number(process.env.PORT) || 8080;
   const hostname = process.env.HOSTNAME ?? 'localhost';
   await app.listen(port, hostname, () => {

diff --git a/packages/frontend/src/components/editor/extensions/files/client.tsx b/packages/frontend/src/components/editor/extensions/files/client.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { acceptMimeTypeImage } from '@/helpers/files-support';
 import { formatBytes } from '@/helpers/format-bytes';
 import {
   NodeViewProps,
@@ -12,7 +13,7 @@ import React from 'react';
 import Moveable from 'react-moveable';
 
 import { CONFIG } from '../../../../helpers/config-with-env';
-import { acceptMimeTypeImage, FilesHandlerAttributes } from './files';
+import { FilesHandlerAttributes } from './files';
 
 const FileComponent = ({
   node: { attrs },

diff --git a/packages/frontend/src/components/editor/extensions/files/files.ts b/packages/frontend/src/components/editor/extensions/files/files.ts
@@ -5,16 +5,6 @@ import { ShowFile } from 'vitnode-shared/files.dto';
 
 import { renderFileNodeForReact } from './client';
 
-export const acceptMimeTypeImage = [
-  'image/jpeg',
-  'image/png',
-  'image/webp',
-  'image/gif',
-  'image/avif',
-];
-
-export const acceptMimeTypeVideo = ['video/mp4', 'video/webm', 'video/ogg'];
-
 export interface FilesHandlerAttributes {
   dir_folder: string;
   file_alt?: string;

diff --git a/packages/frontend/src/components/editor/extensions/files/hooks/use-files-extension-editor.ts b/packages/frontend/src/components/editor/extensions/files/hooks/use-files-extension-editor.ts
@@ -1,14 +1,14 @@
+import {
+  acceptMimeTypeImage,
+  acceptMimeTypeVideo,
+} from '@/helpers/files-support';
 import { useMiddlewareData } from '@/hooks/use-middleware-data';
 import { useSession } from '@/hooks/use-session';
 import { useSessionAdmin } from '@/hooks/use-session-admin';
 import { FilesPermissionsCoreSessions } from 'vitnode-shared/user.dto';
 import { AllowTypeFilesEnum } from 'vitnode-shared/utils/global';
 
-import {
-  acceptMimeTypeImage,
-  acceptMimeTypeVideo,
-  FilesHandlerStorage,
-} from '../files';
+import { FilesHandlerStorage } from '../files';
 
 export const useFilesExtensionEditor = () => {
   const session = useSession();

diff --git a/packages/frontend/src/components/editor/read-only/file-download-button.tsx b/packages/frontend/src/components/editor/read-only/file-download-button.tsx
@@ -1,13 +1,13 @@
 'use client';
 
+import { acceptMimeTypeImage } from '@/helpers/files-support';
 import { formatBytes } from '@/helpers/format-bytes';
 import { File } from 'lucide-react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 
 import { CONFIG } from '../../../helpers/config-with-env';
 import { Button } from '../../ui/button';
-import { acceptMimeTypeImage } from '../extensions/files/files';
 
 export const FileDownloadButton = ({
   allowDownloadAttachments,

diff --git a/packages/frontend/src/helpers/files-support.ts b/packages/frontend/src/helpers/files-support.ts
@@ -4,6 +4,7 @@ export const acceptMimeTypeImage = [
   'image/webp',
   'image/gif',
   'image/avif',
+  'image/svg+xml',
 ];
 
 export const acceptMimeTypeVideo = ['video/mp4', 'video/webm', 'video/ogg'];
diff --git a/packages/frontend/src/views/theme/layout/header/logo.tsx b/packages/frontend/src/views/theme/layout/header/logo.tsx
@@ -6,6 +6,11 @@ import Image from 'next/image';
 
 export const LogoHeader = async ({ className }: { className?: string }) => {
   const { logos } = await getMiddlewareData();
+  // console.log(
+  //   'logos',
+  //   logos,
+  //   `${CONFIG.backend_public_url}/${logos.logo_light.dir_folder}/${logos.logo_light.file_name}`,
+  // );
 
   return (
     <Link