images for forum and forum comments

frontend/src/pages/ForumPostDetail.tsx

@@ -72,16 +72,24 @@ const ForumPostDetail: React.FC = () => {
     }
   };
 
-  const handleReply = async (parentCommentId: string, content: string) => {
+  const handleReply = async (parentCommentId: string, content: string, images: File[] = []) => {
     if (!user) {
       alert('Please log in to reply');
       return;
     }
 
     try {
+      // Upload images to S3 first (if any)
+      let imageFilenames: string[] = [];
+      if (images.length > 0) {
+        const uploadResults = await uploadFiles("forum", images);
+        imageFilenames = uploadResults.map((result) => result.key);
+      }
+
       await forumAPI.createComment(id!, {
         content,
         parentId: parentCommentId,
+        imageFilenames: imageFilenames.length > 0 ? imageFilenames : undefined,
       });
       await fetchPost(); // Refresh to get new reply
     } catch (err: any) {
@@ -89,9 +97,27 @@ const ForumPostDetail: React.FC = () => {
     }
   };
 
-  const handleEditComment = async (commentId: string, content: string) => {
+  const handleEditComment = async (
+    commentId: string,
+    content: string,
+    existingImageKeys: string[],
+    newImageFiles: File[]
+  ) => {
     try {
-      await forumAPI.updateComment(commentId, { content });
+      // Upload new images to S3
+      let newImageFilenames: string[] = [];
+      if (newImageFiles.length > 0) {
+        const uploadResults = await uploadFiles("forum", newImageFiles);
+        newImageFilenames = uploadResults.map((result) => result.key);
+      }
+
+      // Combine existing and new image keys
+      const allImageKeys = [...existingImageKeys, ...newImageFilenames];
+
+      await forumAPI.updateComment(commentId, {
+        content,
+        imageFilenames: allImageKeys,
+      });
       await fetchPost(); // Refresh to get updated comment
     } catch (err: any) {
       throw new Error(err.response?.data?.error || 'Failed to update comment');
@@ -354,7 +380,7 @@ const ForumPostDetail: React.FC = () => {
                         src={getPublicImageUrl(image)}
                         alt={`Post image`}
                         className="img-fluid rounded"
-                        style={{ width: '100%', height: '200px', objectFit: 'cover', cursor: 'pointer' }}
+                        style={{ width: '100%', maxHeight: '400px', objectFit: 'contain', cursor: 'pointer' }}
                         onClick={() => window.open(getPublicImageUrl(image), '_blank')}
                       />
                     </div>