Fix: Resolve image upload and form integration issues

2025-12-21 23:11:12 -05:00 · 2025-10-01 19:02:21 +00:00
parent 37b70111c6
commit 83260e7f73
6 changed files with 57 additions and 199 deletions
--- a/src/components/admin/ParkForm.tsx
+++ b/src/components/admin/ParkForm.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { UppyPhotoUpload } from '@/components/upload/UppyPhotoUpload';
+import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
 import { SlugField } from '@/components/ui/slug-field';
@@ -31,27 +31,28 @@ const parkSchema = z.object({
  phone: z.string().optional(),
  email: z.string().email().optional().or(z.literal('')),
  operator_id: z.string().uuid().optional(),
-  property_owner_id: z.string().uuid().optional()
+  property_owner_id: z.string().uuid().optional(),
+  images: z.object({
+    uploaded: z.array(z.object({
+      url: z.string(),
+      cloudflare_id: z.string(),
+      caption: z.string().optional(),
+    })),
+    banner_assignment: z.number().optional(),
+    card_assignment: z.number().optional(),
+  }).optional()
 });

 type ParkFormData = z.infer<typeof parkSchema>;

 interface ParkFormProps {
  onSubmit: (data: ParkFormData & { 
-    banner_image_url?: string; 
-    card_image_url?: string; 
-    banner_image_id?: string; 
-    card_image_id?: string;
    operator_id?: string;
    property_owner_id?: string;
    _compositeSubmission?: any;
  }) => Promise<void>;
  onCancel?: () => void;
  initialData?: Partial<ParkFormData & { 
-    banner_image_url?: string; 
-    card_image_url?: string; 
-    banner_image_id?: string; 
-    card_image_id?: string;
    operator_id?: string;
    property_owner_id?: string;
  }>;
@@ -81,10 +82,6 @@ const statusOptions = [
 export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
  const { isModerator } = useUserRole();
  const [submitting, setSubmitting] = useState(false);
-  const [bannerImage, setBannerImage] = useState<string>(initialData?.banner_image_url || '');
-  const [cardImage, setCardImage] = useState<string>(initialData?.card_image_url || '');
-  const [bannerImageId, setBannerImageId] = useState<string>(initialData?.banner_image_id || '');
-  const [cardImageId, setCardImageId] = useState<string>(initialData?.card_image_id || '');
  
  // Operator state
  const [selectedOperatorId, setSelectedOperatorId] = useState<string>(initialData?.operator_id || '');
@@ -100,12 +97,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
  const { operators, loading: operatorsLoading } = useOperators();
  const { propertyOwners, loading: ownersLoading } = usePropertyOwners();

-  // Extract Cloudflare image ID from URL
-  const extractImageId = (url: string): string => {
-    const match = url.match(/\/([a-f0-9-]{36})\//);
-    return match ? match[1] : '';
-  };
-
  const {
    register,
    handleSubmit,
@@ -126,7 +117,8 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
      phone: initialData?.phone || '',
      email: initialData?.email || '',
      operator_id: initialData?.operator_id || undefined,
-      property_owner_id: initialData?.property_owner_id || undefined
+      property_owner_id: initialData?.property_owner_id || undefined,
+      images: { uploaded: [] }
    }
  });

@@ -136,13 +128,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
    try {
      // Build composite submission if new entities were created
      const submissionContent: any = {
-        park: {
-          ...data,
-          banner_image_url: bannerImage || undefined,
-          card_image_url: cardImage || undefined,
-          banner_image_id: bannerImageId || undefined,
-          card_image_id: cardImageId || undefined
-        },
+        park: data,
      };
      
      // Add new operator if created
@@ -159,10 +145,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:

      await onSubmit({
        ...data,
-        banner_image_url: bannerImage || undefined,
-        card_image_url: cardImage || undefined,
-        banner_image_id: bannerImageId || undefined,
-        card_image_id: cardImageId || undefined,
        operator_id: tempNewOperator ? undefined : (selectedOperatorId || undefined),
        property_owner_id: tempNewPropertyOwner ? undefined : (selectedPropertyOwnerId || undefined),
        _compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
@@ -432,73 +414,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
          </div>

          {/* Images */}
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <Label>Banner Image</Label>
-              {bannerImage && (
-                <div className="mb-2">
-                  <img src={bannerImage} alt="Current banner" className="h-32 w-full object-cover rounded-md" />
-                </div>
-              )}
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  const url = urls[0];
-                  if (url) {
-                    setBannerImage(url);
-                    const imageId = extractImageId(url);
-                    if (imageId) {
-                      setBannerImageId(imageId);
-                    }
-                  }
-                }}
-                onUploadError={(error) => {
-                  toast({
-                    title: "Upload Error",
-                    description: error.message,
-                    variant: "destructive"
-                  });
-                }}
+          <EntityMultiImageUploader
+            mode={isEditing ? 'edit' : 'create'}
+            value={watch('images')}
+            onChange={(images: ImageAssignments) => setValue('images', images)}
+            entityType="park"
          />
-              <p className="text-xs text-muted-foreground">
-                High-resolution banner image for the park detail page (recommended: 1200x400px)
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <Label>Card Image</Label>
-              {cardImage && (
-                <div className="mb-2">
-                  <img src={cardImage} alt="Current card" className="h-32 w-full object-cover rounded-md" />
-                </div>
-              )}
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  const url = urls[0];
-                  if (url) {
-                    setCardImage(url);
-                    const imageId = extractImageId(url);
-                    if (imageId) {
-                      setCardImageId(imageId);
-                    }
-                  }
-                }}
-                onUploadError={(error) => {
-                  toast({
-                    title: "Upload Error",
-                    description: error.message,
-                    variant: "destructive"
-                  });
-                }}
-              />
-              <p className="text-xs text-muted-foreground">
-                Square or rectangular image for park cards and listings (recommended: 400x300px)
-              </p>
-            </div>
-          </div>

          {/* Form Actions */}
          <div className="flex gap-4 pt-6">
--- a/src/components/admin/RideForm.tsx
+++ b/src/components/admin/RideForm.tsx
@@ -8,7 +8,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { UppyPhotoUpload } from '@/components/upload/UppyPhotoUpload';
+import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -61,27 +61,25 @@ const rideSchema = z.object({
  technical_specs: z.string().optional(),
  // Manufacturer and model
  manufacturer_id: z.string().uuid().optional(),
-  ride_model_id: z.string().uuid().optional()
+  ride_model_id: z.string().uuid().optional(),
+  // Images
+  images: z.object({
+    uploaded: z.array(z.object({
+      url: z.string(),
+      cloudflare_id: z.string(),
+      caption: z.string().optional(),
+    })),
+    banner_assignment: z.number().optional(),
+    card_assignment: z.number().optional(),
+  }).optional()
 });

 type RideFormData = z.infer<typeof rideSchema>;

 interface RideFormProps {
-  onSubmit: (data: RideFormData & { 
-    image_url?: string;
-    banner_image_url?: string;
-    banner_image_id?: string;
-    card_image_url?: string;
-    card_image_id?: string;
-  }) => Promise<void>;
+  onSubmit: (data: RideFormData) => Promise<void>;
  onCancel?: () => void;
-  initialData?: Partial<RideFormData & { 
-    image_url?: string;
-    banner_image_url?: string;
-    banner_image_id?: string;
-    card_image_url?: string;
-    card_image_id?: string;
-  }>;
+  initialData?: Partial<RideFormData>;
  isEditing?: boolean;
 }

@@ -131,10 +129,6 @@ const intensityLevels = [
 export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
  const { isModerator } = useUserRole();
  const [submitting, setSubmitting] = useState(false);
-  const [bannerImageUrl, setBannerImageUrl] = useState<string>(initialData?.banner_image_url || '');
-  const [bannerImageId, setBannerImageId] = useState<string>(initialData?.banner_image_id || '');
-  const [cardImageUrl, setCardImageUrl] = useState<string>(initialData?.card_image_url || '');
-  const [cardImageId, setCardImageId] = useState<string>(initialData?.card_image_id || '');
  const { preferences } = useUnitPreferences();
  const measurementSystem = preferences.measurement_system;

@@ -197,7 +191,8 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
      coaster_stats: initialData?.coaster_stats || '',
      technical_specs: initialData?.technical_specs || '',
      manufacturer_id: initialData?.manufacturer_id || undefined,
-      ride_model_id: initialData?.ride_model_id || undefined
+      ride_model_id: initialData?.ride_model_id || undefined,
+      images: { uploaded: [] }
    }
  });

@@ -224,11 +219,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
          : undefined,
        drop_height_meters: data.drop_height_meters 
          ? convertDistanceToMetric(data.drop_height_meters, measurementSystem) 
-          : undefined,
-        banner_image_url: bannerImageUrl || undefined,
-        banner_image_id: bannerImageId || undefined,
-        card_image_url: cardImageUrl || undefined,
-        card_image_id: cardImageId || undefined
+          : undefined
      };

      // Build composite submission if new entities were created
@@ -714,63 +705,12 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
          </div>

          {/* Images */}
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold">Images</h3>
-            
-            <div className="space-y-2">
-              <Label>Banner Image</Label>
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  if (urls[0]) {
-                    setBannerImageUrl(urls[0]);
-                    // Extract image ID from Cloudflare URL (format: https://imagedelivery.net/<hash>/<id>/<variant>)
-                    const idMatch = urls[0].match(/\/([^/]+)\/public$/);
-                    if (idMatch) {
-                      setBannerImageId(idMatch[1]);
-                    }
-                  }
-                }}
-                showPreview={true}
+          <EntityMultiImageUploader
+            mode={isEditing ? 'edit' : 'create'}
+            value={watch('images') || { uploaded: [] }}
+            onChange={(images: ImageAssignments) => setValue('images', images)}
+            entityType="ride"
          />
-              {bannerImageUrl && (
-                <div className="mt-2">
-                  <img src={bannerImageUrl} alt="Banner preview" className="w-full h-32 object-cover rounded" />
-                </div>
-              )}
-              <p className="text-xs text-muted-foreground">
-                High-resolution banner image for the ride detail page (recommended: 1200x400px)
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <Label>Card Image</Label>
-              <UppyPhotoUpload
-                maxFiles={1}
-                variant="public"
-                onUploadComplete={(urls) => {
-                  if (urls[0]) {
-                    setCardImageUrl(urls[0]);
-                    // Extract image ID from Cloudflare URL
-                    const idMatch = urls[0].match(/\/([^/]+)\/public$/);
-                    if (idMatch) {
-                      setCardImageId(idMatch[1]);
-                    }
-                  }
-                }}
-                showPreview={true}
-              />
-              {cardImageUrl && (
-                <div className="mt-2">
-                  <img src={cardImageUrl} alt="Card preview" className="w-full h-32 object-cover rounded" />
-                </div>
-              )}
-              <p className="text-xs text-muted-foreground">
-                Square or rectangular image for ride cards and listings (recommended: 400x300px)
-              </p>
-            </div>
-          </div>

          {/* Form Actions */}
          <div className="flex gap-4 pt-6">
--- a/src/components/upload/EntityMultiImageUploader.tsx
+++ b/src/components/upload/EntityMultiImageUploader.tsx
@@ -202,7 +202,7 @@ export function EntityMultiImageUploader({
                  onUploadComplete={handleUploadComplete}
                  maxFiles={maxImages - value.uploaded.length}
                  variant="compact"
-                  allowedFileTypes={['image/jpeg', 'image/jpg', 'image/png', 'image/webp']}
+                  allowedFileTypes={['image/*']}
                />
              </div>
            </Card>
--- a/src/components/upload/UppyPhotoUpload.tsx
+++ b/src/components/upload/UppyPhotoUpload.tsx
@@ -77,15 +77,20 @@ export function UppyPhotoUpload({
      return `File "${file.name}" exceeds ${maxSizeMB}MB limit`;
    }

-    const allowedTypes = allowedFileTypes.map(type => 
-      type.replace('*', '').replace('/', '')
-    );
-    
-    if (!allowedTypes.includes('image') && !allowedFileTypes.includes('image/*')) {
-      const fileType = file.type.split('/')[0];
-      if (!allowedTypes.includes(fileType)) {
-        return `File type "${file.type}" is not allowed`;
+    // Check if file type is allowed
+    // Support both wildcard (image/*) and specific types (image/jpeg, image/png)
+    const isWildcardMatch = allowedFileTypes.some(type => {
+      if (type.includes('*')) {
+        const prefix = type.split('/')[0];
+        return file.type.startsWith(prefix + '/');
      }
+      return false;
+    });
+
+    const isExactMatch = allowedFileTypes.includes(file.type);
+
+    if (!isWildcardMatch && !isExactMatch) {
+      return `File type "${file.type}" is not allowed`;
    }

    return null;
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -667,10 +667,6 @@ export default function ParkDetail() {
                website_url: park?.website_url,
                phone: park?.phone,
                email: park?.email,
-                banner_image_url: park?.banner_image_url,
-                banner_image_id: park?.banner_image_id,
-                card_image_url: park?.card_image_url,
-                card_image_id: park?.card_image_id,
                operator_id: park?.operator?.id,
                property_owner_id: park?.property_owner?.id
              }}
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -770,10 +770,6 @@ export default function RideDetail() {
                  intensity_level: ride.intensity_level,
                  drop_height_meters: ride.drop_height_meters,
                  max_g_force: ride.max_g_force,
-                  banner_image_url: ride.banner_image_url,
-                  banner_image_id: ride.banner_image_id,
-                  card_image_url: ride.card_image_url,
-                  card_image_id: ride.card_image_id,
                  manufacturer_id: ride.manufacturer?.id,
                  ride_model_id: ride.ride_model?.id
                }}