attempting to send and receive attachments (images and text) in the chat

andrenormanlang · andrenormanlang · commit fb89ed31fbd3 · 2025-03-27T14:31:42.000+01:00
diff --git a/apps/api/src/chat/chat.controller.ts b/apps/api/src/chat/chat.controller.ts
@@ -9,16 +9,23 @@ import {
   NotFoundException,
   BadRequestException,
   UnauthorizedException,
+  UseInterceptors,
+  UploadedFile,
 } from '@nestjs/common';
 import { ChatService } from './chat.service';
 import { UsersService } from '../users/users.service';
 import { JwtAuthGuard } from '@/auth/jwt.auth.guard';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { CloudinaryService } from '../cloudinary/cloudinary.service';
+import { ApiConsumes, ApiBody } from '@nestjs/swagger';
+import { SendMessageDto } from './dto/send-message.dto';
 
 @Controller('chat')
 export class ChatController {
   constructor(
     private readonly chatService: ChatService,
-    private readonly userService: UsersService
+    private readonly userService: UsersService,
+    private readonly cloudinaryService: CloudinaryService
   ) {}
 
   @Post(':receiverId/send')
@@ -27,10 +34,13 @@ export class ChatController {
     @Request() req,
     @Param('receiverId') receiverId: string,
     @Body('text') text: string,
-    @Body('messageId') messageId: string
+    @Body('messageId') messageId: string,
+    @Body('fileUrl') fileUrl?: string,
+    @Body('fileName') fileName?: string,
+    @Body('fileType') fileType?: string
   ) {
-    if (!text.trim()) {
-      throw new BadRequestException('Message cannot be empty');
+    if (!text.trim() && !fileUrl) {
+      throw new BadRequestException('Message cannot be empty and no file attached');
     }
 
     console.log('Request user:', req.user); // Log the user object to debug
@@ -54,14 +64,77 @@ export class ChatController {
         sender,
         receiver,
         text,
-        messageId
+        messageId,
+        fileUrl,
+        fileName,
+        fileType
       );
     } catch (error) {
       console.error('Error sending message:', error.message);
       throw error;
     }
   }
 
+  @Post(':receiverId/upload')
+  @UseGuards(JwtAuthGuard)
+  @UseInterceptors(FileInterceptor('file'))
+  @ApiConsumes('multipart/form-data')
+  @ApiBody({
+    schema: {
+      type: 'object',
+      properties: {
+        file: {
+          type: 'string',
+          format: 'binary',
+        },
+        text: {
+          type: 'string',
+        },
+        messageId: {
+          type: 'string',
+        },
+      },
+    },
+  })
+  async uploadFile(
+    @Request() req,
+    @Param('receiverId') receiverId: string,
+    @UploadedFile() file: Express.Multer.File,
+    @Body('text') text: string = '',
+    @Body('messageId') messageId: string
+  ) {
+    try {
+      // Upload file to Cloudinary
+      const uploadResult = await this.cloudinaryService.uploadFile(file);
+      console.log('File uploaded to Cloudinary:', uploadResult);
+
+      const sender = await this.userService.getAuthenticatedUser(req.user.id);
+      const receiver = await this.userService.findById(receiverId);
+
+      if (!sender) {
+        throw new NotFoundException(`Sender with ID ${req.user.id} not found`);
+      }
+
+      if (!receiver) {
+        throw new NotFoundException(`Receiver with ID ${receiverId} not found`);
+      }
+
+      // Create message with file details
+      return await this.chatService.sendMessageWithId(
+        sender,
+        receiver,
+        text || `Sent a file: ${file.originalname}`, // Include full filename with extension in message
+        messageId,
+        uploadResult.secure_url,
+        file.originalname, // Use full original filename with extension
+        file.mimetype
+      );
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      throw new BadRequestException(`File upload failed: ${error.message}`);
+    }
+  }
+
   @UseGuards(JwtAuthGuard)
   @Get(':userId1/:userId2/messages')
   async getMessages(
@@ -99,12 +172,12 @@ export class ChatController {
 
   // Endpoint to get unread counts
   @UseGuards(JwtAuthGuard)
-@Get('unread-counts')
-async getUnreadCounts(@Request() req) {
-  const userId = req.user.sub;
-  console.log(`API called by userId: ${userId}`);
-  return await this.chatService.getUnreadCounts(userId);
-}
+  @Get('unread-counts')
+  async getUnreadCounts(@Request() req) {
+    const userId = req.user.sub;
+    console.log(`API called by userId: ${userId}`);
+    return await this.chatService.getUnreadCounts(userId);
+  }
 
   @UseGuards(JwtAuthGuard)
   @Get('active-chats')
diff --git a/apps/api/src/chat/chat.gateway.ts b/apps/api/src/chat/chat.gateway.ts
@@ -113,7 +113,15 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
   @SubscribeMessage('sendMessage')
   async handleSendMessage(
     @MessageBody()
-    message: { id: string; senderId: string; receiverId: string; text: string },
+    message: { 
+      id: string; 
+      senderId: string; 
+      receiverId: string; 
+      text: string;
+      fileUrl?: string;
+      fileName?: string;
+      fileType?: string;
+    },
     @ConnectedSocket() client: Socket
   ) {
     try {
@@ -141,7 +149,10 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
           sender,
           receiver,
           message.text,
-          message.id
+          message.id,
+          message.fileUrl,
+          message.fileName,
+          message.fileType
         );
 
         this.server
@@ -153,6 +164,9 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
             text: savedMessage.message,
             timestamp: savedMessage.createdAt,
             isRead: savedMessage.isRead,
+            fileUrl: savedMessage.fileUrl,
+            fileName: savedMessage.fileName,
+            fileType: savedMessage.fileType
           });
 
         this.server.to(message.senderId).emit('messageDelivered', {
diff --git a/apps/api/src/chat/chat.module.ts b/apps/api/src/chat/chat.module.ts
@@ -10,13 +10,17 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
 import { Room } from './entities/room.entity'; 
 import { ChatMessage } from './entities/chat-message.entity';
 import { RoomsModule } from './rooms.module';
+import { CloudinaryModule } from '@/cloudinary/cloudinary.module';
+import { MulterModule } from '@nestjs/platform-express';
 
 @Module({
   imports: [
     TypeOrmModule.forFeature([ChatMessage, Room]), // Include Room entity here
     UsersModule,
     AuthModule,
     RoomsModule,
+    CloudinaryModule, // Add CloudinaryModule here
+    MulterModule.register(), // Register MulterModule for file uploads
     JwtModule.registerAsync({
       imports: [ConfigModule],
       inject: [ConfigService],
diff --git a/apps/api/src/chat/chat.service.ts b/apps/api/src/chat/chat.service.ts
@@ -33,12 +33,18 @@ export class ChatService {
   async sendMessage(
     sender: User,
     receiver: User,
-    message: string
+    message: string,
+    fileUrl?: string,
+    fileName?: string,
+    fileType?: string
   ): Promise<ChatMessage> {
     const chatMessage = this.chatRepository.create({
       sender,
       receiver,
       message,
+      fileUrl,
+      fileName,
+      fileType,
     });
     const savedMessage = await this.chatRepository.save(chatMessage);
     console.log('Saved message with createdAt:', savedMessage.createdAt);
@@ -54,13 +60,19 @@ export class ChatService {
     sender: User,
     receiver: User,
     message: string,
-    id: string
+    id: string,
+    fileUrl?: string,
+    fileName?: string,
+    fileType?: string
   ): Promise<ChatMessage> {
     const chatMessage = this.chatRepository.create({
       id, // Set the unique ID for the message
       sender,
       receiver,
       message,
+      fileUrl,
+      fileName,
+      fileType,
     });
     const savedMessage = await this.chatRepository.save(chatMessage);
     console.log('Saved message with createdAt:', savedMessage.createdAt);
@@ -104,10 +116,19 @@ export class ChatService {
     return Array.from(chatPartnersMap.values());
   }
 
-  async sendMessageToRoom(room: Room, message: string): Promise<ChatMessage> {
+  async sendMessageToRoom(
+    room: Room, 
+    message: string,
+    fileUrl?: string,
+    fileName?: string,
+    fileType?: string
+  ): Promise<ChatMessage> {
     const chatMessage = this.chatRepository.create({
       message,
       room,
+      fileUrl,
+      fileName,
+      fileType,
     });
     return this.chatRepository.save(chatMessage);
   }
diff --git a/apps/api/src/chat/dto/send-message.dto.ts b/apps/api/src/chat/dto/send-message.dto.ts
@@ -1,7 +1,51 @@
-import { IsString, IsNotEmpty } from 'class-validator';
+import { IsString, IsNotEmpty, IsOptional, IsUrl, ValidateIf } from 'class-validator';
+import { ApiProperty } from '@nestjs/swagger';
 
 export class SendMessageDto {
+  @ApiProperty({
+    description: 'The message content',
+    example: 'Hello, how are you?',
+  })
   @IsString()
   @IsNotEmpty()
   message: string;
+
+  @ApiProperty({
+    description: 'The unique ID for the message',
+    example: 'uuid-1234',
+    required: true,
+  })
+  @IsString()
+  @IsNotEmpty()
+  messageId: string;
+  
+  @ApiProperty({
+    description: 'The URL of the attached file (if any)',
+    example: 'https://res.cloudinary.com/example/image.jpg',
+    required: false,
+  })
+  @IsOptional()
+  @IsUrl()
+  @ValidateIf(o => o.fileUrl !== undefined)
+  fileUrl?: string;
+  
+  @ApiProperty({
+    description: 'The original name of the attached file',
+    example: 'document.pdf',
+    required: false,
+  })
+  @IsOptional()
+  @IsString()
+  @ValidateIf(o => o.fileName !== undefined)
+  fileName?: string;
+  
+  @ApiProperty({
+    description: 'The MIME type of the attached file',
+    example: 'application/pdf',
+    required: false,
+  })
+  @IsOptional()
+  @IsString()
+  @ValidateIf(o => o.fileType !== undefined)
+  fileType?: string;
 }
diff --git a/apps/api/src/chat/entities/chat-message.entity.ts b/apps/api/src/chat/entities/chat-message.entity.ts
@@ -21,6 +21,30 @@ export class ChatMessage {
   @Column({ type: 'text' })
   message!: string;
 
+  @ApiProperty({
+    example: 'https://res.cloudinary.com/example/image.jpg',
+    description: 'The URL of the attached file',
+    required: false,
+  })
+  @Column({ nullable: true })
+  fileUrl?: string;
+
+  @ApiProperty({
+    example: 'image.jpg',
+    description: 'The original name of the attached file',
+    required: false,
+  })
+  @Column({ nullable: true })
+  fileName?: string;
+
+  @ApiProperty({
+    example: 'image/jpeg',
+    description: 'The MIME type of the attached file',
+    required: false,
+  })
+  @Column({ nullable: true })
+  fileType?: string;
+
   @ApiProperty({
     example: 'uuid-1234',
     description: 'The ID of the user who sent the message',
diff --git a/apps/api/src/cloudinary/cloudinary.service.ts b/apps/api/src/cloudinary/cloudinary.service.ts
diff --git a/apps/client/src/components/Chat.tsx b/apps/client/src/components/Chat.tsx
