Add image upload support for OG images

src/pages/QuestionnaireForm.tsx

@@ -1,19 +1,22 @@
-import { useState, useEffect, FormEvent } from 'react'
+import { useState, useEffect, FormEvent, useRef, ChangeEvent } from 'react'
 import { useNavigate, useParams, Link } from 'react-router-dom'
 
 export function QuestionnaireForm() {
   const { id } = useParams()
   const isEditing = !!id
   const navigate = useNavigate()
+  const fileInputRef = useRef<HTMLInputElement>(null)
   
   const [title, setTitle] = useState('')
   const [slug, setSlug] = useState('')
   const [description, setDescription] = useState('')
   const [ogImage, setOgImage] = useState('')
+  const [ogImageMode, setOgImageMode] = useState<'upload' | 'url'>('upload')
   const [isPrivate, setIsPrivate] = useState(false)
   const [error, setError] = useState('')
   const [slugError, setSlugError] = useState('')
   const [loading, setLoading] = useState(false)
+  const [uploading, setUploading] = useState(false)
 
   useEffect(() => {
     if (isEditing) {
@@ -75,6 +78,57 @@ export function QuestionnaireForm() {
     }
   }
 
+  async function handleFileUpload(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    // Validate file type
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+    if (!allowedTypes.includes(file.type)) {
+      setError('Alleen JPEG, PNG, GIF en WebP afbeeldingen zijn toegestaan')
+      return
+    }
+
+    // Validate file size (5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      setError('Afbeelding mag maximaal 5MB zijn')
+      return
+    }
+
+    setUploading(true)
+    setError('')
+
+    try {
+      const formData = new FormData()
+      formData.append('image', file)
+
+      const res = await fetch('/api/admin/upload', {
+        method: 'POST',
+        credentials: 'include',
+        body: formData,
+      })
+
+      const data = await res.json()
+
+      if (!res.ok) {
+        throw new Error(data.error || 'Upload mislukt')
+      }
+
+      setOgImage(data.url)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload mislukt')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  function handleRemoveImage() {
+    setOgImage('')
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
   async function handleSubmit(e: FormEvent) {
     e.preventDefault()
     setError('')
@@ -183,24 +237,97 @@ export function QuestionnaireForm() {
           </div>
 
           <div>
-            <label htmlFor="ogImage" className="block text-sm font-medium text-text mb-2">
+            <label className="block text-sm font-medium text-text mb-2">
               Preview Afbeelding (voor WhatsApp/Social Media)
             </label>
-            <input
-              type="url"
-              id="ogImage"
-              value={ogImage}
-              onChange={(e) => setOgImage(e.target.value)}
-              className="w-full px-4 py-3 bg-bg-input border border-border rounded-lg text-text placeholder-text-faint focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-colors"
-              placeholder="https://voorbeeld.nl/afbeelding.jpg"
-            />
-            <p className="mt-1 text-xs text-text-faint">
-              URL naar een afbeelding die getoond wordt bij het delen van de link op WhatsApp, Facebook, etc.
-              Aanbevolen formaat: 1200x630 pixels.
-            </p>
+            
+            {/* Mode toggle */}
+            <div className="flex gap-2 mb-3">
+              <button
+                type="button"
+                onClick={() => setOgImageMode('upload')}
+                className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+                  ogImageMode === 'upload'
+                    ? 'bg-accent text-white'
+                    : 'bg-bg-input text-text-muted hover:text-text border border-border'
+                }`}
+              >
+                📁 Uploaden
+              </button>
+              <button
+                type="button"
+                onClick={() => setOgImageMode('url')}
+                className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+                  ogImageMode === 'url'
+                    ? 'bg-accent text-white'
+                    : 'bg-bg-input text-text-muted hover:text-text border border-border'
+                }`}
+              >
+                🔗 URL
+              </button>
+            </div>
+
+            {ogImageMode === 'upload' ? (
+              <div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif,image/webp"
+                  onChange={handleFileUpload}
+                  className="hidden"
+                  id="ogImageFile"
+                />
+                <label
+                  htmlFor="ogImageFile"
+                  className={`inline-flex items-center gap-2 px-4 py-3 bg-bg-input border border-border rounded-lg text-text cursor-pointer hover:border-accent transition-colors ${
+                    uploading ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {uploading ? (
+                    <>
+                      <span className="animate-spin">⏳</span>
+                      Uploaden...
+                    </>
+                  ) : (
+                    <>
+                      <span>📷</span>
+                      Kies een afbeelding
+                    </>
+                  )}
+                </label>
+                <p className="mt-2 text-xs text-text-faint">
+                  JPEG, PNG, GIF of WebP. Maximaal 5MB. Aanbevolen: 1200x630 pixels.
+                </p>
+              </div>
+            ) : (
+              <div>
+                <input
+                  type="url"
+                  id="ogImage"
+                  value={ogImage}
+                  onChange={(e) => setOgImage(e.target.value)}
+                  className="w-full px-4 py-3 bg-bg-input border border-border rounded-lg text-text placeholder-text-faint focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-colors"
+                  placeholder="https://voorbeeld.nl/afbeelding.jpg"
+                />
+                <p className="mt-2 text-xs text-text-faint">
+                  URL naar een afbeelding. Aanbevolen formaat: 1200x630 pixels.
+                </p>
+              </div>
+            )}
+
+            {/* Image preview */}
             {ogImage && (
               <div className="mt-3 p-3 bg-bg-input rounded-lg border border-border">
-                <p className="text-xs text-text-muted mb-2">Preview:</p>
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-xs text-text-muted">Preview:</p>
+                  <button
+                    type="button"
+                    onClick={handleRemoveImage}
+                    className="text-xs text-danger hover:text-danger/80 transition-colors"
+                  >
+                    ✕ Verwijderen
+                  </button>
+                </div>
                 <img 
                   src={ogImage} 
                   alt="Preview" 
@@ -209,6 +336,7 @@ export function QuestionnaireForm() {
                     (e.target as HTMLImageElement).style.display = 'none'
                   }}
                 />
+                <p className="mt-2 text-xs text-text-faint font-mono break-all">{ogImage}</p>
               </div>
             )}
           </div>