can add images to forum posts and comments

frontend/src/pages/ForumPostDetail.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
-import { forumAPI } from '../services/api';
+import { forumAPI, getForumImageUrl } from '../services/api';
 import { ForumPost, ForumComment } from '../types';
 import CategoryBadge from '../components/CategoryBadge';
 import PostStatusBadge from '../components/PostStatusBadge';
@@ -36,14 +36,21 @@ const ForumPostDetail: React.FC = () => {
     }
   };
 
-  const handleAddComment = async (content: string) => {
+  const handleAddComment = async (content: string, images: File[]) => {
     if (!user) {
       alert('Please log in to comment');
       return;
     }
 
     try {
-      await forumAPI.createComment(id!, { content });
+      const formData = new FormData();
+      formData.append('content', content);
+
+      images.forEach((file) => {
+        formData.append('images', file);
+      });
+
+      await forumAPI.createComment(id!, formData);
       await fetchPost(); // Refresh to get new comment
     } catch (err: any) {
       throw new Error(err.response?.data?.error || 'Failed to post comment');
@@ -57,7 +64,11 @@ const ForumPostDetail: React.FC = () => {
     }
 
     try {
-      await forumAPI.createComment(id!, { content, parentCommentId });
+      const formData = new FormData();
+      formData.append('content', content);
+      formData.append('parentCommentId', parentCommentId);
+
+      await forumAPI.createComment(id!, formData);
       await fetchPost(); // Refresh to get new reply
     } catch (err: any) {
       throw new Error(err.response?.data?.error || 'Failed to post reply');
@@ -180,21 +191,19 @@ const ForumPostDetail: React.FC = () => {
               <h1 className="h3 mb-2">{post.title}</h1>
 
               <div className="d-flex gap-2 mb-2 flex-wrap">
-                <CategoryBadge category={post.category} />
-                <PostStatusBadge status={post.status} />
-                {post.tags && post.tags.length > 0 && (
-                  <>
-                    {post.tags.map((tag) => (
-                      <Link
-                        key={tag.id}
-                        to={`/forum?tag=${tag.tagName}`}
-                        className="badge bg-light text-dark text-decoration-none"
-                      >
-                        #{tag.tagName}
-                      </Link>
-                    ))}
-                  </>
-                )}
+                <div className="d-flex gap-2">
+                  <CategoryBadge category={post.category} />
+                  <PostStatusBadge status={post.status} />
+                </div>
+                {(post.tags || []).map((tag) => (
+                  <Link
+                    key={tag.id}
+                    to={`/forum?tag=${tag.tagName}`}
+                    className="badge bg-light text-dark text-decoration-none"
+                  >
+                    #{tag.tagName}
+                  </Link>
+                ))}
               </div>
 
               <div className="text-muted small mb-3">
@@ -210,6 +219,22 @@ const ForumPostDetail: React.FC = () => {
                 {post.content}
               </div>
 
+              {post.images && post.images.length > 0 && (
+                <div className="row g-2 mb-3">
+                  {post.images.map((image, index) => (
+                    <div key={index} className="col-6 col-md-4">
+                      <img
+                        src={getForumImageUrl(image)}
+                        alt={`Post image`}
+                        className="img-fluid rounded"
+                        style={{ width: '100%', height: '200px', objectFit: 'cover', cursor: 'pointer' }}
+                        onClick={() => window.open(getForumImageUrl(image), '_blank')}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+
               {isAuthor && (
                 <div className="d-flex gap-2 flex-wrap mb-3">
                     {post.status !== 'closed' && (