From 55cf0efa64f6f2cdcaa34d30f962b707e2c2e2ef Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 1 Aug 2026 14:06:45 +0200
Subject: [PATCH] refactor(logo): improve flow for managing logo

---
 .../panel/settings-panel/ProjectData.tsx      | 26 +++++++++++++------
 .../settings-panel/SettingsPanel.module.scss  |  5 ++++
 .../api-data/project-data/projectData.dao.ts  | 10 ++-----
 .../project-service/projectServiceUtils.ts    | 10 ++++---
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx b/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
index f090879f4..902bf1e8d 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx
@@ -69,6 +69,9 @@ export default function ProjectData() {
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('logo', { message });
+    } finally {
+      // Allow selecting the same local file again after an upload attempt.
+      event.target.value = '';
     }
   };
 
@@ -153,14 +156,21 @@ export default function ProjectData() {
                 {watch('logo') ? (
                   <>
                     <img src={`${projectLogoPath}/${watch('logo')}`} />
-                    <Button
-                      variant='subtle-destructive'
-                      disabled={isSubmitting || !watch('logo')}
-                      onClick={handleDeleteLogo}
-                    >
-                      <IoTrash />
-                      Delete
-                    </Button>
+                    <div className={style.logoActions}>
+                      <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
+                        <IoDownloadOutline />
+                        Replace logo
+                      </Button>
+                      <Button
+                        variant='subtle-destructive'
+                        disabled={isSubmitting || !watch('logo')}
+                        onClick={handleDeleteLogo}
+                        type='button'
+                      >
+                        <IoTrash />
+                        Delete
+                      </Button>
+                    </div>
                   </>
                 ) : (
                   <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.module.scss b/apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.module.scss
index 9ea703b6a..91c039e30 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.module.scss
+++ b/apps/client/src/features/app-settings/panel/settings-panel/SettingsPanel.module.scss
@@ -15,6 +15,11 @@
   }
 }
 
+.logoActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .customDataItem {
   width: 100%;
   display: flex;
diff --git a/apps/server/src/api-data/project-data/projectData.dao.ts b/apps/server/src/api-data/project-data/projectData.dao.ts
index 24ef79be5..e29fbb682 100644
--- a/apps/server/src/api-data/project-data/projectData.dao.ts
+++ b/apps/server/src/api-data/project-data/projectData.dao.ts
@@ -16,19 +16,13 @@ export function getProjectData(): Readonly<ProjectData> {
 
 /**
  * Patches the current project data
- * Handles deleting the local logo if the logo has been removed
  */
 export async function editCurrentProjectData(newData: Partial<ProjectData>) {
   const currentProjectData = getDataProvider().getProjectData();
   const updatedProjectData = await getDataProvider().setProjectData(newData);
 
-  // Delete the old logo if the logo has been removed
-  if (!updatedProjectData.logo && currentProjectData.logo) {
-    const filePath = join(publicDir.logoDir, currentProjectData.logo);
-
-    deleteFile(filePath).catch((_error) => {
-      /** we do not handle this error */
-    });
+  if (currentProjectData.logo && currentProjectData.logo !== updatedProjectData.logo) {
+    deleteFile(join(publicDir.logoDir, currentProjectData.logo));
   }
 
   // Notify the websocket clients to refetch the project data
diff --git a/apps/server/src/services/project-service/projectServiceUtils.ts b/apps/server/src/services/project-service/projectServiceUtils.ts
index 6ccb900fb..58bd897fb 100644
--- a/apps/server/src/services/project-service/projectServiceUtils.ts
+++ b/apps/server/src/services/project-service/projectServiceUtils.ts
@@ -3,6 +3,7 @@ import { readFile, stat } from 'fs/promises';
 import { extname, join } from 'path';
 
 import { DatabaseModel, MaybeString, ProjectFile } from 'ontime-types';
+import { generateId } from 'ontime-utils';
 
 import { publicDir } from '../../setup/index.js';
 import { dockerSafeRename, getFilesFromFolder, removeFileExtension } from '../../utils/fileManagement.js';
@@ -20,15 +21,16 @@ export async function handleProjectUploaded(filePath: string, name: string) {
 
 /**
  * Handles the upload of a logo image
- * @throws if the file already exits
+ * Each upload gets a unique filename so logos cannot conflict across projects.
  * @param filePath
  * @param name
- * @returns
+ * @returns the generated filename
  */
 export async function handleImageUpload(filePath: string, name: string): Promise<string> {
-  const newFilePath = join(publicDir.logoDir, name);
+  const filename = `${generateId()}${extname(name)}`;
+  const newFilePath = join(publicDir.logoDir, filename);
   await dockerSafeRename(filePath, newFilePath);
-  return name;
+  return filename;
 }
 
 /**