Upload corporate logo (#1314)

* feat: upload logo to project data

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

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.
  */

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');

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) => {

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);

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);

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);

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,
     });
   });
 

apps/server/src/models/dataModel.ts

@@ -10,6 +10,7 @@ export const dbModel: DatabaseModel = {
     publicInfo: '',
     backstageUrl: '',
     backstageInfo: '',
+    projectLogo: null,
   },
   settings: {
     app: 'ontime',

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',

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.

apps/server/src/setup/config.ts

@@ -21,4 +21,5 @@ export const config = {
     filename: 'override.css',
   },
   uploads: 'uploads',
+  logo: 'logo',
 };

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;
 
 /**

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()', () => {

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,
   };
 }