From 9f418d6b199d9dacb697383e1091119952d2a29b Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Sun, 28 Jun 2026 23:26:21 -0500
Subject: [PATCH] fix: slide editor upload button now works with useRef instead
 of nested label

---
 src/app/admin/page.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 2dacac7..24868fd 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -532,6 +532,7 @@ function SlidesSection({ slides, setSlides, images, onToast, onRefreshImages }:
 function SlideEditor({ slide, setSlide, images, onRefreshImages, onSave, onCancel }: any) {
   const [showPicker, setShowPicker] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const s = { ...slide };
   
   const handleUpload = async (files: FileList) => {
@@ -568,10 +569,8 @@ function SlideEditor({ slide, setSlide, images, onRefreshImages, onSave, onCance
             <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Image</label>
             <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
               <Btn onClick={() => setShowPicker(!showPicker)} size="sm" variant="secondary">{showPicker ? 'Hide picker' : 'Pick from gallery'}</Btn>
-              <label style={{ cursor: 'pointer' }}>
-                <input type="file" accept="image/*" multiple style={{ display: 'none' }} onChange={(e) => { if (e.target.files?.length) handleUpload(e.target.files); e.target.value = ''; }} />
-                <Btn size="sm" variant="secondary" disabled={uploading}>{uploading ? 'Uploading...' : 'Upload from computer'}</Btn>
-              </label>
+              <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={(e) => { if (e.target.files?.length) handleUpload(e.target.files); e.target.value = ''; }} />
+              <Btn size="sm" variant="secondary" disabled={uploading} onClick={() => fileInputRef.current?.click()}>{uploading ? 'Uploading...' : 'Upload from computer'}</Btn>
               {s.image_id && images.find((i: Image) => i.id === s.image_id) && (
                 <img src={images.find((i: Image) => i.id === s.image_id)!.data} style={{ width: 80, height: 56, objectFit: 'cover', borderRadius: 8, border: `2px solid ${C.gold}` }} />
               )}