feat: implement space and workspace icons (#1558)

* feat: implement space and workspace icons
- Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons
- Add Sharp package for server-side image resizing and optimization
- Create reusable AvatarUploader component supporting avatars, space icons, and workspace icons
- Support removing icons

* add workspace logo support
- add upload loader
- add white background to transparent image
- other fixes and enhancements

* dark mode

* fixes

* cleanup

apps/server/src/common/helpers/utils.ts

@@ -72,7 +72,9 @@ export function extractDateFromUuid7(uuid7: string) {
 }
 
 export function sanitizeFileName(fileName: string): string {
-  const sanitizedFilename = sanitize(fileName).replace(/ /g, '_');
+  const sanitizedFilename = sanitize(fileName)
+    .replace(/ /g, '_')
+    .replace(/#/g, '_');
   return sanitizedFilename.slice(0, 255);
 }
 

apps/server/src/core/attachment/attachment.constants.ts

@@ -1,12 +1,12 @@
 export enum AttachmentType {
   Avatar = 'avatar',
-  WorkspaceLogo = 'workspace-logo',
-  SpaceLogo = 'space-logo',
+  WorkspaceIcon = 'workspace-icon',
+  SpaceIcon = 'space-icon',
   File = 'file',
 }
 
 export const validImageExtensions = ['.jpg', '.png', '.jpeg'];
-export const MAX_AVATAR_SIZE = '5MB';
+export const MAX_AVATAR_SIZE = '10MB';
 
 export const inlineFileExtensions = [
   '.jpg',

apps/server/src/core/attachment/attachment.controller.ts

@@ -1,5 +1,6 @@
 import {
   BadRequestException,
+  Body,
   Controller,
   ForbiddenException,
   Get,
@@ -51,6 +52,7 @@ import { EnvironmentService } from '../../integrations/environment/environment.s
 import { TokenService } from '../auth/services/token.service';
 import { JwtAttachmentPayload, JwtType } from '../auth/dto/jwt-payload';
 import * as path from 'path';
+import { RemoveIconDto } from './dto/attachment.dto';
 
 @Controller()
 export class AttachmentController {
@@ -302,7 +304,7 @@ export class AttachmentController {
       throw new BadRequestException('Invalid image attachment type');
     }
 
-    if (attachmentType === AttachmentType.WorkspaceLogo) {
+    if (attachmentType === AttachmentType.WorkspaceIcon) {
       const ability = this.workspaceAbility.createForUser(user, workspace);
       if (
         ability.cannot(
@@ -314,7 +316,7 @@ export class AttachmentController {
       }
     }
 
-    if (attachmentType === AttachmentType.SpaceLogo) {
+    if (attachmentType === AttachmentType.SpaceIcon) {
       if (!spaceId) {
         throw new BadRequestException('spaceId is required');
       }
@@ -372,8 +374,59 @@ export class AttachmentController {
       });
       return res.send(fileStream);
     } catch (err) {
-      this.logger.error(err);
+     // this.logger.error(err);
       throw new NotFoundException('File not found');
     }
   }
+
+  @UseGuards(JwtAuthGuard)
+  @HttpCode(HttpStatus.OK)
+  @Post('attachments/remove-icon')
+  async removeIcon(
+    @Body() dto: RemoveIconDto,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
+    const { type, spaceId } = dto;
+
+    // remove current user avatar
+    if (type === AttachmentType.Avatar) {
+      await this.attachmentService.removeUserAvatar(user);
+      return;
+    }
+
+    // remove space icon
+    if (type === AttachmentType.SpaceIcon) {
+      if (!spaceId) {
+        throw new BadRequestException(
+          'spaceId is required to change space icons',
+        );
+      }
+
+      const spaceAbility = await this.spaceAbility.createForUser(user, spaceId);
+      if (
+        spaceAbility.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Settings)
+      ) {
+        throw new ForbiddenException();
+      }
+
+      await this.attachmentService.removeSpaceIcon(spaceId, workspace.id);
+      return;
+    }
+
+    // remove workspace icon
+    if (type === AttachmentType.WorkspaceIcon) {
+      const ability = this.workspaceAbility.createForUser(user, workspace);
+      if (
+        ability.cannot(
+          WorkspaceCaslAction.Manage,
+          WorkspaceCaslSubject.Settings,
+        )
+      ) {
+        throw new ForbiddenException();
+      }
+      await this.attachmentService.removeWorkspaceIcon(workspace);
+      return;
+    }
+  }
 }

apps/server/src/core/attachment/attachment.utils.ts

@@ -1,8 +1,8 @@
 import { MultipartFile } from '@fastify/multipart';
-import { randomBytes } from 'crypto';
-import { sanitize } from 'sanitize-filename-ts';
 import * as path from 'path';
 import { AttachmentType } from './attachment.constants';
+import { sanitizeFileName } from '../../common/helpers';
+import * as sharp from 'sharp';
 
 export interface PreparedFile {
   buffer: Buffer;
@@ -22,10 +22,8 @@ export async function prepareFile(
   }
 
   try {
-    const rand = randomBytes(8).toString('hex');
-
     const buffer = await file.toBuffer();
-    const sanitizedFilename = sanitize(file.filename).replace(/ /g, '_');
+    const sanitizedFilename = sanitizeFileName(file.filename);
     const fileName = sanitizedFilename.slice(0, 255);
     const fileSize = buffer.length;
     const fileExtension = path.extname(file.filename).toLowerCase();
@@ -58,9 +56,9 @@ export function getAttachmentFolderPath(
   switch (type) {
     case AttachmentType.Avatar:
       return `${workspaceId}/avatars`;
-    case AttachmentType.WorkspaceLogo:
-      return `${workspaceId}/workspace-logo`;
-    case AttachmentType.SpaceLogo:
+    case AttachmentType.WorkspaceIcon:
+      return `${workspaceId}/workspace-logos`;
+    case AttachmentType.SpaceIcon:
       return `${workspaceId}/space-logos`;
     case AttachmentType.File:
       return `${workspaceId}/files`;
@@ -70,3 +68,51 @@ export function getAttachmentFolderPath(
 }
 
 export const validAttachmentTypes = Object.values(AttachmentType);
+
+export async function compressAndResizeIcon(
+  buffer: Buffer,
+  attachmentType?: AttachmentType,
+): Promise<Buffer> {
+  try {
+    let sharpInstance = sharp(buffer);
+    const metadata = await sharpInstance.metadata();
+
+    const targetWidth = 300;
+    const targetHeight = 300;
+
+    // Only resize if image is larger than target dimensions
+    if (metadata.width > targetWidth || metadata.height > targetHeight) {
+      sharpInstance = sharpInstance.resize(targetWidth, targetHeight, {
+        fit: 'inside',
+        withoutEnlargement: true,
+      });
+    }
+
+    // Handle based on original format
+    if (metadata.format === 'png') {
+      // Only flatten avatars to remove transparency
+      if (attachmentType === AttachmentType.Avatar) {
+        sharpInstance = sharpInstance.flatten({
+          background: { r: 255, g: 255, b: 255 },
+        });
+      }
+
+      return await sharpInstance
+        .png({
+          quality: 85,
+          compressionLevel: 6,
+        })
+        .toBuffer();
+    } else {
+      return await sharpInstance
+        .jpeg({
+          quality: 85,
+          progressive: true,
+          mozjpeg: true,
+        })
+        .toBuffer();
+    }
+  } catch (err) {
+    throw err;
+  }
+}

apps/server/src/core/attachment/dto/attachment.dto.ts

@@ -0,0 +1,17 @@
+import { IsEnum, IsIn, IsNotEmpty, IsOptional, IsUUID } from 'class-validator';
+import { AttachmentType } from '../attachment.constants';
+
+export class RemoveIconDto {
+  @IsEnum(AttachmentType)
+  @IsIn([
+    AttachmentType.Avatar,
+    AttachmentType.SpaceIcon,
+    AttachmentType.WorkspaceIcon,
+  ])
+  @IsNotEmpty()
+  type: AttachmentType;
+
+  @IsOptional()
+  @IsUUID()
+  spaceId: string;
+}

apps/server/src/core/attachment/dto/avatar-upload.dto.ts

@@ -1,3 +0,0 @@
-import { IsOptional, IsString, IsUUID } from 'class-validator';
-
-export class AvatarUploadDto {}

apps/server/src/core/attachment/dto/get-file.dto.ts

@@ -1,7 +0,0 @@
-import { IsNotEmpty, IsString } from 'class-validator';
-
-export class GetFileDto {
-  @IsString()
-  @IsNotEmpty()
-  attachmentId: string;
-}

apps/server/src/core/attachment/dto/upload-file.dto.ts

@@ -1,20 +0,0 @@
-import {
-  IsDefined,
-  IsNotEmpty,
-  IsOptional,
-  IsString,
-  IsUUID,
-} from 'class-validator';
-
-export class UploadFileDto {
-  @IsString()
-  @IsNotEmpty()
-  attachmentType: string;
-
-  @IsOptional()
-  @IsUUID()
-  pageId: string;
-
-  @IsDefined()
-  file: any;
-}

apps/server/src/core/attachment/services/attachment.service.ts

@@ -7,6 +7,7 @@ import {
 import { StorageService } from '../../../integrations/storage/storage.service';
 import { MultipartFile } from '@fastify/multipart';
 import {
+  compressAndResizeIcon,
   getAttachmentFolderPath,
   PreparedFile,
   prepareFile,
@@ -16,7 +17,7 @@ import { v4 as uuid4, v7 as uuid7 } from 'uuid';
 import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo';
 import { AttachmentType, validImageExtensions } from '../attachment.constants';
 import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
-import { Attachment } from '@docmost/db/types/entity.types';
+import { Attachment, User, Workspace } from '@docmost/db/types/entity.types';
 import { InjectKysely } from 'nestjs-kysely';
 import { executeTx } from '@docmost/db/utils';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';
@@ -132,8 +133,8 @@ export class AttachmentService {
     filePromise: Promise<MultipartFile>,
     type:
       | AttachmentType.Avatar
-      | AttachmentType.WorkspaceLogo
-      | AttachmentType.SpaceLogo,
+      | AttachmentType.WorkspaceIcon
+      | AttachmentType.SpaceIcon,
     userId: string,
     workspaceId: string,
     spaceId?: string,
@@ -141,6 +142,9 @@ export class AttachmentService {
     const preparedFile: PreparedFile = await prepareFile(filePromise);
     validateFileType(preparedFile.fileExtension, validImageExtensions);
 
+    const processedBuffer = await compressAndResizeIcon(preparedFile.buffer, type);
+    preparedFile.buffer = processedBuffer;
+    preparedFile.fileSize = processedBuffer.length;
     preparedFile.fileName = uuid4() + preparedFile.fileExtension;
 
     const filePath = `${getAttachmentFolderPath(type, workspaceId)}/${preparedFile.fileName}`;
@@ -174,7 +178,7 @@ export class AttachmentService {
             workspaceId,
             trx,
           );
-        } else if (type === AttachmentType.WorkspaceLogo) {
+        } else if (type === AttachmentType.WorkspaceIcon) {
           const workspace = await this.workspaceRepo.findById(workspaceId, {
             trx,
           });
@@ -186,7 +190,7 @@ export class AttachmentService {
             workspaceId,
             trx,
           );
-        } else if (type === AttachmentType.SpaceLogo && spaceId) {
+        } else if (type === AttachmentType.SpaceIcon && spaceId) {
           const space = await this.spaceRepo.findById(spaceId, workspaceId, {
             trx,
           });
@@ -205,7 +209,6 @@ export class AttachmentService {
       });
     } catch (err) {
       // delete uploaded file on db update failure
-      this.logger.error('Image upload error:', err);
       await this.deleteRedundantFile(filePath);
       throw new BadRequestException('Failed to upload image');
     }
@@ -389,4 +392,40 @@ export class AttachmentService {
     }
   }
 
+  async removeUserAvatar(user: User) {
+    if (user.avatarUrl && !user.avatarUrl.toLowerCase().startsWith('http')) {
+      const filePath = `${getAttachmentFolderPath(AttachmentType.Avatar, user.workspaceId)}/${user.avatarUrl}`;
+      await this.deleteRedundantFile(filePath);
+    }
+
+    await this.userRepo.updateUser(
+      { avatarUrl: null },
+      user.id,
+      user.workspaceId,
+    );
+  }
+
+  async removeSpaceIcon(spaceId: string, workspaceId: string) {
+    const space = await this.spaceRepo.findById(spaceId, workspaceId);
+
+    if (!space) {
+      throw new NotFoundException('Space not found');
+    }
+
+    if (space.logo && !space.logo.toLowerCase().startsWith('http')) {
+      const filePath = `${getAttachmentFolderPath(AttachmentType.SpaceIcon, workspaceId)}/${space.logo}`;
+      await this.deleteRedundantFile(filePath);
+    }
+
+    await this.spaceRepo.updateSpace({ logo: null }, spaceId, workspaceId);
+  }
+
+  async removeWorkspaceIcon(workspace: Workspace) {
+    if (workspace.logo && !workspace.logo.toLowerCase().startsWith('http')) {
+      const filePath = `${getAttachmentFolderPath(AttachmentType.WorkspaceIcon, workspace.id)}/${workspace.logo}`;
+      await this.deleteRedundantFile(filePath);
+    }
+
+    await this.workspaceRepo.updateWorkspace({ logo: null }, workspace.id);
+  }
 }