sending images through messages works

backend/migrations/20251218192220-allow-null-message-content.js

@@ -0,0 +1,21 @@
+"use strict";
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.changeColumn("Messages", "content", {
+      type: Sequelize.TEXT,
+      allowNull: true,
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // First update any null content to empty string before reverting
+    await queryInterface.sequelize.query(
+      `UPDATE "Messages" SET content = '' WHERE content IS NULL`
+    );
+    await queryInterface.changeColumn("Messages", "content", {
+      type: Sequelize.TEXT,
+      allowNull: false,
+    });
+  },
+};

backend/models/Message.js

@@ -25,7 +25,7 @@ const Message = sequelize.define('Message', {
   },
   content: {
     type: DataTypes.TEXT,
-    allowNull: false
+    allowNull: true
   },
   isRead: {
     type: DataTypes.BOOLEAN,
@@ -36,7 +36,15 @@ const Message = sequelize.define('Message', {
     allowNull: true
   }
 }, {
-  timestamps: true
+  timestamps: true,
+  validate: {
+    contentOrImage() {
+      const hasContent = this.content && this.content.trim().length > 0;
+      if (!hasContent && !this.imageFilename) {
+        throw new Error('Message must have content or an image');
+      }
+    }
+  }
 });
 
 module.exports = Message;

backend/routes/messages.js

@@ -316,7 +316,7 @@ router.post('/', authenticateToken, async (req, res, next) => {
       error: error.message,
       stack: error.stack,
       senderId: req.user.id,
-      receiverId: req.body.receiverId
+      receiverId: req.body?.receiverId
     });
     next(error);
   }

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)
+      // Upload image to S3 first if present
-      const formData = new FormData();
+      let imageFilename: string | undefined;
-      formData.append("receiverId", recipient.id);
-      formData.append("content", messageContent || " "); // Send space if only image
       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();
+      await messageAPI.sendMessage({
-      formData.append('receiverId', recipient.id);
+        receiverId: recipient.id,
-      formData.append('content', content);
+        content,
-
+      });
-      await messageAPI.sendMessage(formData);
 
       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) =>
+  sendMessage: (data: {
-    api.post("/messages", formData, {
+    receiverId: string;
-      headers: {
+    content: string;
-        "Content-Type": "multipart/form-data",
+    imageFilename?: string;
-      },
+  }) => api.post("/messages", data),
-    }),
   markAsRead: (id: string) => api.put(`/messages/${id}/read`),
   getUnreadCount: () => api.get("/messages/unread/count"),
 };