From a6e1cbbbce6c0c35e45fa2ce6539517a838f1c40 Mon Sep 17 00:00:00 2001
From: Ary <arylmoraesn@gmail.com>
Date: Sun, 17 Nov 2024 14:55:20 -0700
Subject: [PATCH] Upload corporate logo (#1314)

* feat: upload logo to project data

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>
---
 apps/client/src/common/api/constants.ts       |  1 +
 apps/client/src/common/api/project.ts         | 17 +++-
 apps/client/src/common/models/ProjectData.ts  |  1 +
 apps/client/src/common/utils/uploadUtils.ts   | 18 +++-
 .../app-settings/panel-utils/PanelUtils.tsx   |  4 +-
 .../panel/project-panel/ProjectData.tsx       | 93 ++++++++++++++++++-
 .../project-panel/ProjectPanel.module.scss    | 23 +++++
 .../src/features/viewers/timer/Timer.scss     |  8 ++
 .../src/features/viewers/timer/Timer.tsx      |  8 +-
 apps/server/src/api-data/db/db.controller.ts  | 39 +++++++-
 apps/server/src/api-data/db/db.middleware.ts  | 14 +++
 apps/server/src/api-data/db/db.validation.ts  |  1 +
 .../api-data/project/project.controller.ts    | 20 +++-
 .../src/api-data/project/project.router.ts    |  3 +
 .../api-data/project/project.validation.ts    |  1 +
 .../__tests__/DataProvider.utils.test.ts      |  2 +
 apps/server/src/models/dataModel.ts           |  1 +
 apps/server/src/models/demoProject.ts         |  1 +
 .../project-service/projectServiceUtils.ts    | 10 +-
 apps/server/src/setup/config.ts               |  1 +
 apps/server/src/setup/index.ts                |  1 +
 .../utils/__tests__/parserFunctions.test.ts   | 28 ++++++
 apps/server/src/utils/parserFunctions.ts      |  1 +
 .../ontime-controller/BackendResponse.type.ts |  4 +
 .../src/definitions/core/ProjectData.type.ts  |  1 +
 packages/types/src/index.ts                   |  1 +
 26 files changed, 289 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/common/api/constants.ts b/apps/client/src/common/api/constants.ts
index a75d75385..789e1ce87 100644
--- a/apps/client/src/common/api/constants.ts
+++ b/apps/client/src/common/api/constants.ts
@@ -26,3 +26,4 @@ export const ontimeURL = `${serverURL}/ontime`;
 export const userAssetsPath = 'user';
 export const cssOverridePath = 'styles/override.css';
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
+export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
diff --git a/apps/client/src/common/api/project.ts b/apps/client/src/common/api/project.ts
index 11b14d267..50e7689d6 100644
--- a/apps/client/src/common/api/project.ts
+++ b/apps/client/src/common/api/project.ts
@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { ProjectData } from 'ontime-types';
+import { ProjectData, ProjectLogoResponse } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
@@ -19,3 +19,18 @@ export async function getProjectData(): Promise<ProjectData> {
 export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
   return axios.post(projectPath, data);
 }
+
+/**
+ * HTTP request to upload a project logo
+ */
+export async function uploadProjectLogo(file: File): Promise<AxiosResponse<ProjectLogoResponse>> {
+  const formData = new FormData();
+  formData.append('image', file);
+  const response = await axios.post(`${projectPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response;
+}
diff --git a/apps/client/src/common/models/ProjectData.ts b/apps/client/src/common/models/ProjectData.ts
index 142748e82..4d7a0e57c 100644
--- a/apps/client/src/common/models/ProjectData.ts
+++ b/apps/client/src/common/models/ProjectData.ts
@@ -7,4 +7,5 @@ export const projectDataPlaceholder: ProjectData = {
   publicInfo: '',
   backstageUrl: '',
   backstageInfo: '',
+  projectLogo: null,
 };
diff --git a/apps/client/src/common/utils/uploadUtils.ts b/apps/client/src/common/utils/uploadUtils.ts
index 83098e876..95a67365a 100644
--- a/apps/client/src/common/utils/uploadUtils.ts
+++ b/apps/client/src/common/utils/uploadUtils.ts
@@ -34,7 +34,7 @@ export function validateProjectFile(file: File) {
 
   // Limit file size of a project file to around 1MB
   if (file.size > 1_000_000) {
-    throw new Error('File size limit (10MB) exceeded');
+    throw new Error('File size limit (1MB) exceeded');
   }
 }
 
@@ -45,3 +45,19 @@ export function isExcelFile(file: File | null) {
 export function isOntimeFile(file: File | null) {
   return file?.name.endsWith('.json');
 }
+
+/**
+ * Collection of rules for pre-validating a project file
+ * @param file
+ */
+export function validateLogo(file: File) {
+  // Check if file is empty
+  if (file.size === 0) {
+    throw new Error('File is empty');
+  }
+
+  // Limit file size of a project file to around 1MB
+  if (file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
+  }
+}
diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
index 67e4a4422..4020d73d6 100644
--- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
+++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx
@@ -35,9 +35,9 @@ export function Paragraph({ children }: { children: ReactNode }) {
   return <p className={style.paragraph}>{children}</p>;
 }
 
-export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
+export function Card({ children, className, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
   return (
-    <div className={style.card} {...props}>
+    <div className={cx([style.card, className])} {...props}>
       {children}
     </div>
   );
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx b/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
index 2bcede449..d3a0e2baf 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
@@ -1,11 +1,15 @@
-import { useEffect } from 'react';
+import { ChangeEvent, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input, Textarea } from '@chakra-ui/react';
+import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { type ProjectData } from 'ontime-types';
 
-import { postProjectData } from '../../../../common/api/project';
+import { projectLogoPath } from '../../../../common/api/constants';
+import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
+import { validateLogo } from '../../../../common/utils/uploadUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -17,8 +21,10 @@ export default function ProjectData() {
     handleSubmit,
     register,
     reset,
-    formState: { isSubmitting, isValid, isDirty },
+    formState: { isSubmitting, isValid, isDirty, errors },
     setError,
+    watch,
+    setValue,
   } = useForm({
     defaultValues: data,
     values: data,
@@ -34,6 +40,40 @@ export default function ProjectData() {
     }
   }, [data, reset]);
 
+  const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      validateLogo(file);
+      const response = await uploadProjectLogo(file);
+
+      setValue('projectLogo', response.data.logoFilename, {
+        shouldDirty: true,
+      });
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('projectLogo', { message });
+    }
+  };
+
+  const { ref, ...projectLogoRest } = register('projectLogo');
+
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClickUpload = () => {
+    uploadInputRef.current?.click();
+  };
+
+  const handleDeleteLogo = () => {
+    setValue('projectLogo', null, {
+      shouldDirty: true,
+    });
+  };
+
   const onSubmit = async (formData: ProjectData) => {
     try {
       await postProjectData(formData);
@@ -86,6 +126,53 @@ export default function ProjectData() {
               {...register('title')}
             />
           </label>
+          <Panel.Section style={{ marginTop: 0 }}>
+            <label>
+              Project logo
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                type='file'
+                style={{ display: 'none' }}
+                accept='image/*'
+                {...projectLogoRest}
+                ref={(e) => {
+                  ref(e);
+                  uploadInputRef.current = e;
+                }}
+                onChange={handleUploadProjectLogo}
+              />
+              <Panel.Card className={style.uploadLogoCard}>
+                {watch('projectLogo') ? (
+                  <>
+                    <img src={`${projectLogoPath}/${watch('projectLogo')}`} />
+                    <Button
+                      size='sm'
+                      variant='ontime-filled'
+                      isDisabled={isSubmitting || !watch('projectLogo')}
+                      leftIcon={<IoTrash />}
+                      onClick={handleDeleteLogo}
+                      type='button'
+                    >
+                      Delete
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    variant='ontime-filled'
+                    size='sm'
+                    isDisabled={isSubmitting}
+                    leftIcon={<IoDownloadOutline />}
+                    onClick={handleClickUpload}
+                    type='button'
+                  >
+                    Upload logo
+                  </Button>
+                )}
+                {errors?.projectLogo?.message && <Panel.Error>{errors.projectLogo.message}</Panel.Error>}
+              </Panel.Card>
+            </label>
+          </Panel.Section>
           <label>
             Project description
             <Input
diff --git a/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss b/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
index 08689c91c..ee664856a 100644
--- a/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
+++ b/apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss
@@ -61,3 +61,26 @@
     gap: 1rem;
   }
 }
+
+.flex {
+  display: flex;
+  gap: 1rem;
+  height: 100px;
+}
+
+.uploadLogoCard {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  background-color: $gray-1350;
+  border: 1px solid $white-10;
+  border-radius: 3px;
+
+  img {
+    max-width: 250px;
+    height: auto;
+  }
+}
diff --git a/apps/client/src/features/viewers/timer/Timer.scss b/apps/client/src/features/viewers/timer/Timer.scss
index 4034e8d9d..1e8bf1d28 100644
--- a/apps/client/src/features/viewers/timer/Timer.scss
+++ b/apps/client/src/features/viewers/timer/Timer.scss
@@ -194,4 +194,12 @@
     text-align: center;
     font-weight: 600;
   }
+
+  .logo {
+    position: absolute;
+    top: 2vw;
+    left: 2vw;
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
+  }
 }
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index 5c3eb38c8..0446454b7 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -5,6 +5,7 @@ import {
   MessageState,
   OntimeEvent,
   Playback,
+  ProjectData,
   Settings,
   SimpleTimerState,
   TimerPhase,
@@ -12,6 +13,7 @@ import {
   ViewSettings,
 } from 'ontime-types';
 
+import { projectLogoPath } from '../../../common/api/constants';
 import { FitText } from '../../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
@@ -50,6 +52,7 @@ interface TimerProps {
   customFields: CustomFields;
   eventNext: OntimeEvent | null;
   eventNow: OntimeEvent | null;
+  general: ProjectData;
   isMirrored: boolean;
   message: MessageState;
   settings: Settings | undefined;
@@ -58,7 +61,8 @@ interface TimerProps {
 }
 
 export default function Timer(props: TimerProps) {
-  const { auxTimer, customFields, eventNow, eventNext, isMirrored, message, settings, time, viewSettings } = props;
+  const { auxTimer, customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } =
+    props;
 
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -168,6 +172,8 @@ export default function Timer(props: TimerProps) {
 
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
+      {general?.projectLogo && <img src={`${projectLogoPath}/${general.projectLogo}`} className='logo' />}
+
       <ViewParamsEditor viewOptions={timerOptions} />
       <div className={message.timer.blackout ? 'blackout blackout--active' : 'blackout'} />
       {!userOptions.hideMessage && (
diff --git a/apps/server/src/api-data/db/db.controller.ts b/apps/server/src/api-data/db/db.controller.ts
index 886e2bd7e..c7d3194c3 100644
--- a/apps/server/src/api-data/db/db.controller.ts
+++ b/apps/server/src/api-data/db/db.controller.ts
@@ -1,9 +1,19 @@
-import { DatabaseModel, ErrorResponse, MessageResponse, ProjectFileListResponse } from 'ontime-types';
+import {
+  DatabaseModel,
+  ErrorResponse,
+  MessageResponse,
+  ProjectFileListResponse,
+  ProjectLogoResponse,
+} from 'ontime-types';
 import { getErrorMessage } from 'ontime-utils';
 
 import type { Request, Response } from 'express';
 
-import { doesProjectExist, handleUploaded } from '../../services/project-service/projectServiceUtils.js';
+import {
+  doesProjectExist,
+  handleImageUpload,
+  handleUploaded,
+} from '../../services/project-service/projectServiceUtils.js';
 import * as projectService from '../../services/project-service/ProjectService.js';
 
 export async function patchPartialProjectFile(req: Request, res: Response<DatabaseModel | ErrorResponse>) {
@@ -39,6 +49,7 @@ export async function createProjectFile(req: Request, res: Response<{ filename:
         publicInfo: req.body?.publicInfo ?? '',
         backstageUrl: req.body?.backstageUrl ?? '',
         backstageInfo: req.body?.backstageInfo ?? '',
+        projectLogo: req.body?.projectLogo ?? null,
       },
     });
 
@@ -124,6 +135,30 @@ export async function postProjectFile(req: Request, res: Response<MessageRespons
   }
 }
 
+/**
+ * Uploads an image file to be used as a project logo.
+ * The image file is saved in the logo directory.
+ */
+export async function postProjectLogo(req: Request, res: Response<ProjectLogoResponse | ErrorResponse>) {
+  if (!req.file) {
+    res.status(400).send({ message: 'File not found' });
+    return;
+  }
+
+  try {
+    const { filename, path } = req.file;
+
+    const logoFilename = await handleImageUpload(path, filename);
+
+    res.status(201).send({
+      logoFilename,
+    });
+  } catch (error) {
+    const message = getErrorMessage(error);
+    res.status(500).send({ message });
+  }
+}
+
 /**
  * Retrieves and lists all project files from the uploads directory.
  */
diff --git a/apps/server/src/api-data/db/db.middleware.ts b/apps/server/src/api-data/db/db.middleware.ts
index 6caef9070..e81709c5b 100644
--- a/apps/server/src/api-data/db/db.middleware.ts
+++ b/apps/server/src/api-data/db/db.middleware.ts
@@ -12,8 +12,22 @@ const filterProjectFile = (_req: Request, file: Express.Multer.File, cb: FileFil
   }
 };
 
+const filterImageFile = (_req: Request, file: Express.Multer.File, cb: FileFilterCallback) => {
+  if (file.mimetype.includes('image')) {
+    cb(null, true);
+  } else {
+    cb(null, false);
+  }
+}
+
 // Build multer uploader for a single file
 export const uploadProjectFile = multer({
   storage,
   fileFilter: filterProjectFile,
 }).single('project');
+
+// Build multer uploader for a single image file
+export const uploadImageFile = multer({
+  storage,
+  fileFilter: filterImageFile,
+}).single('image');
diff --git a/apps/server/src/api-data/db/db.validation.ts b/apps/server/src/api-data/db/db.validation.ts
index 6ca86fa42..8687f9652 100644
--- a/apps/server/src/api-data/db/db.validation.ts
+++ b/apps/server/src/api-data/db/db.validation.ts
@@ -13,6 +13,7 @@ export const validateNewProject = [
   body('publicInfo').optional().isString().trim(),
   body('backstageUrl').optional().isString().trim(),
   body('backstageInfo').optional().isString().trim(),
+  body('projectLogo').optional().isString().trim(),
   body('endMessage').optional().isString().trim(),
 
   (req: Request, res: Response, next: NextFunction) => {
diff --git a/apps/server/src/api-data/project/project.controller.ts b/apps/server/src/api-data/project/project.controller.ts
index 2e4f27615..4e5255dfc 100644
--- a/apps/server/src/api-data/project/project.controller.ts
+++ b/apps/server/src/api-data/project/project.controller.ts
@@ -2,12 +2,14 @@ import { ErrorResponse, ProjectData } from 'ontime-types';
 import { getErrorMessage } from 'ontime-utils';
 
 import type { Request, Response } from 'express';
+import { join } from 'path';
 
-import { removeUndefined } from '../../utils/parserUtils.js';
+import { deleteFile, removeUndefined } from '../../utils/parserUtils.js';
 import { failEmptyObjects } from '../../utils/routerUtils.js';
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
+import { publicDir } from '../../setup/index.js';
 
-export async function getProjectData(_req: Request, res: Response<ProjectData>) {
+export function getProjectData(_req: Request, res: Response<ProjectData>) {
   res.json(getDataProvider().getProjectData());
 }
 
@@ -17,6 +19,8 @@ export async function postProjectData(req: Request, res: Response<ProjectData |
   }
 
   try {
+    const currentProjectData = getDataProvider().getProjectData();
+
     const newEvent: Partial<ProjectData> = removeUndefined({
       title: req.body?.title,
       description: req.body?.description,
@@ -25,8 +29,20 @@ export async function postProjectData(req: Request, res: Response<ProjectData |
       backstageUrl: req.body?.backstageUrl,
       backstageInfo: req.body?.backstageInfo,
       endMessage: req.body?.endMessage,
+      projectLogo: req.body?.projectLogo,
     });
+
     const newData = await getDataProvider().setProjectData(newEvent);
+
+    // Delete the old logo if the new logo is empty
+    if (!newData.projectLogo && currentProjectData.projectLogo) {
+      const filePath = join(publicDir.logoDir, currentProjectData.projectLogo);
+
+      deleteFile(filePath).catch((_error) => {
+        /** we do not handle this error */
+      });
+    }
+
     res.status(200).send(newData);
   } catch (error) {
     const message = getErrorMessage(error);
diff --git a/apps/server/src/api-data/project/project.router.ts b/apps/server/src/api-data/project/project.router.ts
index 4ec9382aa..5c725e96c 100644
--- a/apps/server/src/api-data/project/project.router.ts
+++ b/apps/server/src/api-data/project/project.router.ts
@@ -2,8 +2,11 @@ import express from 'express';
 
 import { getProjectData, postProjectData } from './project.controller.js';
 import { projectSanitiser } from './project.validation.js';
+import { uploadImageFile } from '../db/db.middleware.js';
+import { postProjectLogo } from '../db/db.controller.js';
 
 export const router = express.Router();
 
 router.get('/', getProjectData);
 router.post('/', projectSanitiser, postProjectData);
+router.post('/upload', uploadImageFile, postProjectLogo);
diff --git a/apps/server/src/api-data/project/project.validation.ts b/apps/server/src/api-data/project/project.validation.ts
index c343682f3..8ea22eeb5 100644
--- a/apps/server/src/api-data/project/project.validation.ts
+++ b/apps/server/src/api-data/project/project.validation.ts
@@ -9,6 +9,7 @@ export const projectSanitiser = [
   body('backstageUrl').optional().isString().trim(),
   body('backstageInfo').optional().isString().trim(),
   body('endMessage').optional().isString().trim(),
+  body('projectLogo').optional({ nullable: true }).isString().trim(),
 
   (req: Request, res: Response, next: NextFunction) => {
     const errors = validationResult(req);
diff --git a/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts b/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
index f4fc625ea..5315fc833 100644
--- a/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
+++ b/apps/server/src/classes/data-provider/__tests__/DataProvider.utils.test.ts
@@ -11,6 +11,7 @@ describe('safeMerge', () => {
       backstageUrl: 'existing backstageUrl',
       publicInfo: 'existing backstageInfo',
       backstageInfo: 'existing backstageInfo',
+      projectLogo: null,
     },
     settings: {
       app: 'ontime',
@@ -77,6 +78,7 @@ describe('safeMerge', () => {
       publicInfo: 'new public info',
       backstageUrl: 'existing backstageUrl',
       backstageInfo: 'existing backstageInfo',
+      projectLogo: null,
     });
   });
 
diff --git a/apps/server/src/models/dataModel.ts b/apps/server/src/models/dataModel.ts
index 11fd0071d..02bb374f9 100644
--- a/apps/server/src/models/dataModel.ts
+++ b/apps/server/src/models/dataModel.ts
@@ -10,6 +10,7 @@ export const dbModel: DatabaseModel = {
     publicInfo: '',
     backstageUrl: '',
     backstageInfo: '',
+    projectLogo: null,
   },
   settings: {
     app: 'ontime',
diff --git a/apps/server/src/models/demoProject.ts b/apps/server/src/models/demoProject.ts
index b8c72a711..78ed0cef9 100644
--- a/apps/server/src/models/demoProject.ts
+++ b/apps/server/src/models/demoProject.ts
@@ -357,6 +357,7 @@ export const demoDb: DatabaseModel = {
     publicInfo: 'Rehearsal Schedule - Turin 2022',
     backstageUrl: 'www.github.com/cpvalente/ontime',
     backstageInfo: 'Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal',
+    projectLogo: null,
   },
   settings: {
     app: 'ontime',
diff --git a/apps/server/src/services/project-service/projectServiceUtils.ts b/apps/server/src/services/project-service/projectServiceUtils.ts
index 8e99de4c2..e28116586 100644
--- a/apps/server/src/services/project-service/projectServiceUtils.ts
+++ b/apps/server/src/services/project-service/projectServiceUtils.ts
@@ -5,7 +5,7 @@ import { copyFile, readFile, rename, stat } from 'fs/promises';
 import { extname, join } from 'path';
 
 import { publicDir } from '../../setup/index.js';
-import { getFilesFromFolder, removeFileExtension } from '../../utils/fileManagement.js';
+import { ensureDirectory, getFilesFromFolder, removeFileExtension } from '../../utils/fileManagement.js';
 
 /**
  * Handles the upload of a new project file
@@ -17,6 +17,14 @@ export async function handleUploaded(filePath: string, name: string) {
   await rename(filePath, newFilePath);
 }
 
+export async function handleImageUpload(filePath: string, name: string): Promise<string> {
+  ensureDirectory(publicDir.logoDir);
+  const newFilePath = join(publicDir.logoDir, name);
+  await rename(filePath, newFilePath);
+
+  return name;
+}
+
 /**
  * Asynchronously retrieves and returns an array of project files from the 'uploads' folder.
  * Each file in the 'uploads' folder is checked, and only those with a '.json' extension are processed.
diff --git a/apps/server/src/setup/config.ts b/apps/server/src/setup/config.ts
index c69b90eef..2d5384260 100644
--- a/apps/server/src/setup/config.ts
+++ b/apps/server/src/setup/config.ts
@@ -21,4 +21,5 @@ export const config = {
     filename: 'override.css',
   },
   uploads: 'uploads',
+  logo: 'logo',
 };
diff --git a/apps/server/src/setup/index.ts b/apps/server/src/setup/index.ts
index caf07d5e4..3a1c7c96e 100644
--- a/apps/server/src/setup/index.ts
+++ b/apps/server/src/setup/index.ts
@@ -129,6 +129,7 @@ export const publicDir = {
   userDir: join(resolvePublicDirectory, config.user),
   /** path to external styles override */
   stylesDir: join(resolvePublicDirectory, config.user, config.styles.directory),
+  logoDir: join(resolvePublicDirectory, config.user, config.logo),
 } as const;
 
 /**
diff --git a/apps/server/src/utils/__tests__/parserFunctions.test.ts b/apps/server/src/utils/__tests__/parserFunctions.test.ts
index 5d0f65be8..ad0de0937 100644
--- a/apps/server/src/utils/__tests__/parserFunctions.test.ts
+++ b/apps/server/src/utils/__tests__/parserFunctions.test.ts
@@ -60,6 +60,34 @@ describe('parseProject()', () => {
     expect(result).toBeTypeOf('object');
     expect(errorEmitter).toHaveBeenCalledOnce();
   });
+
+  it('test migration with adding the logo field v3.8.0', () => {
+    const errorEmitter = vi.fn();
+    const result = parseProject(
+      {
+        //@ts-expect-error -- checking migration when the logo field is added
+        project: {
+          title: 'title',
+          description: 'description',
+          publicUrl: 'publicUrl',
+          publicInfo: 'publicInfo',
+          backstageUrl: 'backstageUrl',
+          backstageInfo: 'backstageInfo',
+        },
+      },
+      errorEmitter,
+    );
+    expect(result).toStrictEqual({
+      title: 'title',
+      description: 'description',
+      publicUrl: 'publicUrl',
+      publicInfo: 'publicInfo',
+      backstageUrl: 'backstageUrl',
+      backstageInfo: 'backstageInfo',
+      projectLogo: null,
+    });
+    expect(errorEmitter).not.toHaveBeenCalled();
+  });
 });
 
 describe('parseSettings()', () => {
diff --git a/apps/server/src/utils/parserFunctions.ts b/apps/server/src/utils/parserFunctions.ts
index beb55077b..dadde53bb 100644
--- a/apps/server/src/utils/parserFunctions.ts
+++ b/apps/server/src/utils/parserFunctions.ts
@@ -122,6 +122,7 @@ export function parseProject(data: Partial<DatabaseModel>, emitError?: ErrorEmit
     publicInfo: data.project.publicInfo ?? dbModel.project.publicInfo,
     backstageUrl: data.project.backstageUrl ?? dbModel.project.backstageUrl,
     backstageInfo: data.project.backstageInfo ?? dbModel.project.backstageInfo,
+    projectLogo: data.project.projectLogo ?? dbModel.project.projectLogo,
   };
 }
 
diff --git a/packages/types/src/api/ontime-controller/BackendResponse.type.ts b/packages/types/src/api/ontime-controller/BackendResponse.type.ts
index f548832ef..d81dd8827 100644
--- a/packages/types/src/api/ontime-controller/BackendResponse.type.ts
+++ b/packages/types/src/api/ontime-controller/BackendResponse.type.ts
@@ -42,6 +42,10 @@ export type MessageResponse = {
   message: string;
 };
 
+export type ProjectLogoResponse = {
+  logoFilename: string;
+};
+
 export type ErrorResponse = MessageResponse;
 
 export type AuthenticationStatus = 'authenticated' | 'not_authenticated' | 'pending';
diff --git a/packages/types/src/definitions/core/ProjectData.type.ts b/packages/types/src/definitions/core/ProjectData.type.ts
index cd3d82971..feb273f10 100644
--- a/packages/types/src/definitions/core/ProjectData.type.ts
+++ b/packages/types/src/definitions/core/ProjectData.type.ts
@@ -5,4 +5,5 @@ export type ProjectData = {
   publicInfo: string;
   backstageUrl: string;
   backstageInfo: string;
+  projectLogo: string | null;
 };
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 207ae8284..82e37ee90 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -52,6 +52,7 @@ export type {
   MessageResponse,
   RundownPaginated,
   SessionStats,
+  ProjectLogoResponse,
 } from './api/ontime-controller/BackendResponse.type.js';
 export type { QuickStartData } from './api/db/db.type.js';
 export type { RundownCached, NormalisedRundown } from './api/rundown-controller/BackendResponse.type.js';