can add images to forum posts and comments

frontend/src/pages/CreateForumPost.tsx

@@ -3,6 +3,7 @@ import { useNavigate, Link } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { forumAPI } from "../services/api";
 import TagInput from "../components/TagInput";
+import ForumImageUpload from "../components/ForumImageUpload";
 
 const CreateForumPost: React.FC = () => {
   const { user } = useAuth();
@@ -21,6 +22,9 @@ const CreateForumPost: React.FC = () => {
     tags: [] as string[],
   });
 
+  const [imageFiles, setImageFiles] = useState<File[]>([]);
+  const [imagePreviews, setImagePreviews] = useState<string[]>([]);
+
   const categories = [
     {
       value: "item_request",
@@ -57,6 +61,31 @@ const CreateForumPost: React.FC = () => {
     setFormData((prev) => ({ ...prev, tags }));
   };
 
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    const remainingSlots = 5 - imageFiles.length;
+    const filesToAdd = files.slice(0, remainingSlots);
+
+    setImageFiles((prev) => [...prev, ...filesToAdd]);
+
+    // Create preview URLs
+    filesToAdd.forEach((file) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImagePreviews((prev) => [...prev, reader.result as string]);
+      };
+      reader.readAsDataURL(file);
+    });
+
+    // Reset input
+    e.target.value = "";
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setImageFiles((prev) => prev.filter((_, i) => i !== index));
+    setImagePreviews((prev) => prev.filter((_, i) => i !== index));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
@@ -84,7 +113,24 @@ const CreateForumPost: React.FC = () => {
 
     try {
       setIsSubmitting(true);
-      const response = await forumAPI.createPost(formData);
+
+      // Create FormData
+      const submitData = new FormData();
+      submitData.append('title', formData.title);
+      submitData.append('content', formData.content);
+      submitData.append('category', formData.category);
+
+      // Add tags as JSON string
+      if (formData.tags.length > 0) {
+        submitData.append('tags', JSON.stringify(formData.tags));
+      }
+
+      // Add images
+      imageFiles.forEach((file) => {
+        submitData.append('images', file);
+      });
+
+      const response = await forumAPI.createPost(submitData);
       navigate(`/forum/${response.data.id}`);
     } catch (err: any) {
       setError(err.response?.data?.error || "Failed to create post");
@@ -223,7 +269,7 @@ const CreateForumPost: React.FC = () => {
                 </div>
 
                 {/* Tags */}
-                <div className="mb-4">
+                <div className="mb-3">
                   <label className="form-label">
                     Tags <span className="text-muted">(optional)</span>
                   </label>
@@ -237,6 +283,17 @@ const CreateForumPost: React.FC = () => {
                   </div>
                 </div>
 
+                {/* Images */}
+                <div className="mb-4">
+                  <ForumImageUpload
+                    imageFiles={imageFiles}
+                    imagePreviews={imagePreviews}
+                    onImageChange={handleImageChange}
+                    onRemoveImage={handleRemoveImage}
+                    maxImages={5}
+                  />
+                </div>
+
                 {/* Category-specific guidelines */}
                 {formData.category === "item_request" && (
                   <div className="alert alert-info mb-3">