s3

frontend/src/pages/ForumPostDetail.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate, Link, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
-import { forumAPI, getForumImageUrl } from '../services/api';
+import { forumAPI } from '../services/api';
+import { uploadFiles, getPublicImageUrl } from '../services/uploadService';
 import { ForumPost, ForumComment } from '../types';
 import CategoryBadge from '../components/CategoryBadge';
 import PostStatusBadge from '../components/PostStatusBadge';
@@ -54,17 +55,20 @@ const ForumPostDetail: React.FC = () => {
     }
 
     try {
-      const formData = new FormData();
-      formData.append('content', content);
+      // 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);
+      }
 
-      images.forEach((file) => {
-        formData.append('images', file);
+      await forumAPI.createComment(id!, {
+        content,
+        imageFilenames: imageFilenames.length > 0 ? imageFilenames : undefined,
       });
-
-      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');
+      throw new Error(err.response?.data?.error || err.message || 'Failed to post comment');
     }
   };
 
@@ -75,14 +79,13 @@ const ForumPostDetail: React.FC = () => {
     }
 
     try {
-      const formData = new FormData();
-      formData.append('content', content);
-      formData.append('parentCommentId', parentCommentId);
-
-      await forumAPI.createComment(id!, formData);
+      await forumAPI.createComment(id!, {
+        content,
+        parentId: parentCommentId,
+      });
       await fetchPost(); // Refresh to get new reply
     } catch (err: any) {
-      throw new Error(err.response?.data?.error || 'Failed to post reply');
+      throw new Error(err.response?.data?.error || err.message || 'Failed to post reply');
     }
   };
 
@@ -348,11 +351,11 @@ const ForumPostDetail: React.FC = () => {
                   {post.imageFilenames.map((image, index) => (
                     <div key={index} className="col-6 col-md-4">
                       <img
-                        src={getForumImageUrl(image)}
+                        src={getPublicImageUrl(image)}
                         alt={`Post image`}
                         className="img-fluid rounded"
                         style={{ width: '100%', height: '200px', objectFit: 'cover', cursor: 'pointer' }}
-                        onClick={() => window.open(getForumImageUrl(image), '_blank')}
+                        onClick={() => window.open(getPublicImageUrl(image), '_blank')}
                       />
                     </div>
                   ))}