sending images through messages works

frontend/src/components/ChatWindow.tsx

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import { messageAPI } from "../services/api";
-import { getSignedUrl } from "../services/uploadService";
+import { getSignedUrl, uploadFile } from "../services/uploadService";
 import { User, Message } from "../types";
 import { useAuth } from "../contexts/AuthContext";
 import { useSocket } from "../contexts/SocketContext";
@@ -374,15 +374,18 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
     }
 
     try {
-      // Build FormData for message (with or without image)
-      const formData = new FormData();
-      formData.append("receiverId", recipient.id);
-      formData.append("content", messageContent || " "); // Send space if only image
+      // Upload image to S3 first if present
+      let imageFilename: string | undefined;
       if (imageToSend) {
-        formData.append("image", imageToSend);
+        const { key } = await uploadFile("message", imageToSend);
+        imageFilename = key;
       }
 
-      const response = await messageAPI.sendMessage(formData);
+      const response = await messageAPI.sendMessage({
+        receiverId: recipient.id,
+        content: messageContent || "",
+        imageFilename,
+      });
 
       // Add message to sender's chat immediately for instant feedback
       // Socket will handle updating the receiver's chat
@@ -559,7 +562,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
                             />
                           </div>
                         )}
-                      {message.content.trim() && (
+                      {message.content?.trim() && (
                         <p className="mb-1" style={{ fontSize: "0.95rem" }}>
                           {message.content}
                         </p>

frontend/src/components/MessageModal.tsx

@@ -20,11 +20,10 @@ const MessageModal: React.FC<MessageModalProps> = ({ show, onClose, recipient, o
     setSending(true);
 
     try {
-      const formData = new FormData();
-      formData.append('receiverId', recipient.id);
-      formData.append('content', content);
-
-      await messageAPI.sendMessage(formData);
+      await messageAPI.sendMessage({
+        receiverId: recipient.id,
+        content,
+      });
 
       setContent('');
       onClose();

frontend/src/services/api.ts

@@ -248,12 +248,11 @@ export const messageAPI = {
   getSentMessages: () => api.get("/messages/sent"),
   getConversations: () => api.get("/messages/conversations"),
   getMessage: (id: string) => api.get(`/messages/${id}`),
-  sendMessage: (formData: FormData) =>
-    api.post("/messages", formData, {
-      headers: {
-        "Content-Type": "multipart/form-data",
-      },
-    }),
+  sendMessage: (data: {
+    receiverId: string;
+    content: string;
+    imageFilename?: string;
+  }) => api.post("/messages", data),
   markAsRead: (id: string) => api.put(`/messages/${id}/read`),
   getUnreadCount: () => api.get("/messages/unread/count"),
 };