feat: increase upload limit to 50 and add svg support with error handling

components/gallery/CreateEventGalleryForm.tsx

@@ -17,10 +17,18 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
 
     const [selectedImages, setSelectedImages] = useState<File[]>([]);
     const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+    const [loading, setLoading] = useState(false);
     const [errors, setErrors] = useState<FormErrors>({});
 
     const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
         const files = Array.from(e.target.files || []);
+        
+        if (selectedImages.length + files.length > 50) {
+            setErrors({ images: 'You can only upload up to 50 images at a time' });
+            alert('You can only upload up to 50 images at a time');
+            return;
+        }
+
         const validImages: File[] = [];
         const previews: string[] = [];
 
@@ -33,6 +41,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
 
         setSelectedImages(prev => [...prev, ...validImages]);
         setPreviewUrls(prev => [...prev, ...previews]);
+        setErrors(prev => ({ ...prev, images: '' })); // clear error if valid
     };
 
     const handleImageDelete = (index: number) => {
@@ -45,6 +54,8 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
 
         if (selectedImages.length === 0) {
             newErrors.images = 'Please upload at least one image';
+        } else if (selectedImages.length > 50) {
+            newErrors.images = 'Only 50 images can be uploaded at a time';
         }
 
         setErrors(newErrors);
@@ -55,6 +66,7 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
         e.preventDefault();
         if (!validateForm()) return;
 
+        setLoading(true);
         try {
             const formData = new FormData();
 
@@ -66,10 +78,10 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
             console.log("uploadres", uploadRes)
             const uploadedUrls = uploadRes?.data?.data?.map((image: any) => image?.fullUrl) || []; 
 
-            // Step 2: Prepare correct body for bulk save
+            // Step 2: Prepare body for bulk save
             const body = {
-                eventid: Number(eventId), // ensure number
+                eventid: Number(eventId), 
-                imageurl: uploadedUrls   // API may expect 'imageurls' not 'imageurl'
+                imageurl: uploadedUrls   
             };
 
             console.log("Sending body:", body);
@@ -81,8 +93,13 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
             );
 
             router.push(`/event-gallery?eventid=${eventId}`);
-        } catch (error) {
+        } catch (error: any) {
             console.error('Upload failed:', error);
+            const message = error.response?.data?.message || 'Failed to upload images. Please try again.';
+            setErrors({ submit: message });
+            alert(message);
+        } finally {
+            setLoading(false);
         }
     };
 
@@ -130,9 +147,10 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
             <div className="mt-6">
                 <button
                     type="submit"
-                    className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700"
+                    disabled={loading}
+                    className={`bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
                 >
-                    Submit
+                    {loading ? 'Uploading...' : 'Submit'}
                 </button>
             </div>
         </form>