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;