s3 image file validation

frontend/src/components/CommentForm.tsx

@@ -87,7 +87,6 @@ const CommentForm: React.FC<CommentFormProps> = ({
           imagePreviews={imagePreviews}
           onImageChange={handleImageChange}
           onRemoveImage={handleRemoveImage}
-          maxImages={3}
           compact={true}
         />
       )}

frontend/src/components/ConditionCheckModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { conditionCheckAPI } from "../services/api";
+import { IMAGE_LIMITS } from "../config/imageLimits";
 
 interface ConditionCheckModalProps {
   show: boolean;
@@ -59,8 +60,8 @@ const ConditionCheckModal: React.FC<ConditionCheckModalProps> = ({
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const selectedFiles = Array.from(e.target.files);
-      if (selectedFiles.length + photos.length > 20) {
-        setError("Maximum 20 photos allowed");
+      if (selectedFiles.length + photos.length > IMAGE_LIMITS.conditionChecks) {
+        setError(`Maximum ${IMAGE_LIMITS.conditionChecks} photos allowed`);
         return;
       }
       setPhotos((prev) => [...prev, ...selectedFiles]);
@@ -153,7 +154,7 @@ const ConditionCheckModal: React.FC<ConditionCheckModalProps> = ({
             <div className="mb-3">
               <label className="form-label">
                 Photos <span className="text-danger">*</span>
-                <small className="text-muted ms-2">(Maximum 20 photos)</small>
+                <small className="text-muted ms-2">(Maximum {IMAGE_LIMITS.conditionChecks} photos)</small>
               </label>
               <input
                 type="file"

frontend/src/components/ForumImageUpload.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import { IMAGE_LIMITS } from '../config/imageLimits';
 
 interface ForumImageUploadProps {
   imageFiles: File[];
   imagePreviews: string[];
   onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onRemoveImage: (index: number) => void;
-  maxImages?: number;
   compact?: boolean;
 }
 
@@ -14,9 +14,10 @@ const ForumImageUpload: React.FC<ForumImageUploadProps> = ({
   imagePreviews,
   onImageChange,
   onRemoveImage,
-  maxImages = 5,
   compact = false
 }) => {
+  const maxImages = IMAGE_LIMITS.forum;
+
   return (
     <div className={compact ? 'mb-2' : 'mb-3'}>
       <label className="form-label mb-1">

frontend/src/components/ImageUpload.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IMAGE_LIMITS } from '../config/imageLimits';
 
 interface ImageUploadProps {
   imageFiles: File[];
@@ -15,12 +16,14 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
   onRemoveImage,
   error
 }) => {
+  const maxImages = IMAGE_LIMITS.items;
+
   return (
     <div className="card mb-4">
       <div className="card-body">
         <div className="mb-3">
           <label className="form-label mb-0">
-            Upload Images (Max 5)
+            Upload Images (Max {maxImages})
           </label>
           <div className="form-text mb-2">
             Have pictures of everything that's included
@@ -31,7 +34,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
             onChange={onImageChange}
             accept="image/*"
             multiple
-            disabled={imageFiles.length >= 5}
+            disabled={imageFiles.length >= maxImages}
           />
         </div>
 
@@ -67,4 +70,4 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
   );
 };
 
-export default ImageUpload;
+export default ImageUpload;

frontend/src/config/imageLimits.ts

@@ -0,0 +1,11 @@
+/**
+ * Image upload limits configuration
+ * Keep in sync with backend/config/imageLimits.js
+ */
+export const IMAGE_LIMITS = {
+  items: 10,
+  forum: 10,
+  conditionChecks: 10,
+  profile: 1,
+  messages: 1,
+} as const;

frontend/src/pages/CreateForumPost.tsx

@@ -380,7 +380,6 @@ const CreateForumPost: React.FC = () => {
                     imagePreviews={imagePreviews}
                     onImageChange={handleImageChange}
                     onRemoveImage={handleRemoveImage}
-                    maxImages={5}
                   />
                 </div>
 

frontend/src/pages/CreateItem.tsx

@@ -11,6 +11,7 @@ import DeliveryOptions from "../components/DeliveryOptions";
 import PricingForm from "../components/PricingForm";
 import RulesForm from "../components/RulesForm";
 import { Address } from "../types";
+import { IMAGE_LIMITS } from "../config/imageLimits";
 
 interface ItemFormData {
   name: string;
@@ -356,9 +357,8 @@ const CreateItem: React.FC = () => {
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
 
-    // Limit to 5 images
-    if (imageFiles.length + files.length > 5) {
-      setError("You can upload a maximum of 5 images");
+    if (imageFiles.length + files.length > IMAGE_LIMITS.items) {
+      setError(`You can upload a maximum of ${IMAGE_LIMITS.items} images`);
       return;
     }
 

frontend/src/pages/EditItem.tsx

@@ -11,6 +11,7 @@ import LocationForm from "../components/LocationForm";
 import DeliveryOptions from "../components/DeliveryOptions";
 import PricingForm from "../components/PricingForm";
 import RulesForm from "../components/RulesForm";
+import { IMAGE_LIMITS } from "../config/imageLimits";
 
 interface ItemFormData {
   name: string;
@@ -346,9 +347,8 @@ const EditItem: React.FC = () => {
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
 
-    // Limit to 5 images total
-    if (imagePreviews.length + files.length > 5) {
-      setError("You can upload a maximum of 5 images");
+    if (imagePreviews.length + files.length > IMAGE_LIMITS.items) {
+      setError(`You can upload a maximum of ${IMAGE_LIMITS.items} images`);
       return;
     }