muken/la-huasca-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: slide editor upload button now works with useRef instead of nested label

Browse Source
This commit is contained in:
muken
2026-06-28 23:26:21 -05:00
parent a892e9e132
commit 9f418d6b19
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/page.tsx
+3 -4
View File
@@ -532,6 +532,7 @@ function SlidesSection({ slides, setSlides, images, onToast, onRefreshImages }:
function SlideEditor({ slide, setSlide, images, onRefreshImages, onSave, onCancel }: any) { function SlideEditor({ slide, setSlide, images, onRefreshImages, onSave, onCancel }: any) {
const [showPicker, setShowPicker] = useState(false); const [showPicker, setShowPicker] = useState(false);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const s = { ...slide }; const s = { ...slide };
const handleUpload = async (files: FileList) => { 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> <label style={{ fontSize: '13px', fontWeight: 600, color: C.text }}>Image</label>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
<Btn onClick={() => setShowPicker(!showPicker)} size="sm" variant="secondary">{showPicker ? 'Hide picker' : 'Pick from gallery'}</Btn> <Btn onClick={() => setShowPicker(!showPicker)} size="sm" variant="secondary">{showPicker ? 'Hide picker' : 'Pick from gallery'}</Btn>
<label style={{ cursor: 'pointer' }}> <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={(e) => { if (e.target.files?.length) handleUpload(e.target.files); e.target.value = ''; }} />
<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} onClick={() => fileInputRef.current?.click()}>{uploading ? 'Uploading...' : 'Upload from computer'}</Btn>
<Btn size="sm" variant="secondary" disabled={uploading}>{uploading ? 'Uploading...' : 'Upload from computer'}</Btn>
</label>
{s.image_id && images.find((i: Image) => i.id === s.image_id) && ( {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}` }} /> <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}` }} />
)} )}