Add image upload support for OG images

server/index.ts

@@ -59,6 +59,18 @@ app.use('/api/auth', authRoutes);
 app.use('/api/admin', adminRoutes);
 app.use('/api/q', questionnaireRoutes);
 
+// Serve uploaded files
+const uploadsDir = isProduction 
+  ? '/app/data/uploads'
+  : path.join(__dirname, '..', 'data', 'uploads');
+
+// Ensure uploads directory exists
+if (!fs.existsSync(uploadsDir)) {
+  fs.mkdirSync(uploadsDir, { recursive: true });
+}
+
+app.use('/uploads', express.static(uploadsDir));
+
 // Serve static files in production
 if (isProduction) {
   const clientPath = path.join(__dirname, '../client');
@@ -83,16 +95,22 @@ if (isProduction) {
     const title = questionnaire.title;
     const description = questionnaire.description || 'Activiteiten Inventaris - Voeg activiteiten toe en stem!';
     
+    // Make image URL absolute if it's a relative path
+    let ogImageUrl = questionnaire.og_image;
+    if (ogImageUrl && ogImageUrl.startsWith('/')) {
+      ogImageUrl = `${baseUrl}${ogImageUrl}`;
+    }
+    
     const ogTags = `
     <meta property="og:type" content="website" />
     <meta property="og:url" content="${pageUrl}" />
     <meta property="og:title" content="${title}" />
     <meta property="og:description" content="${description}" />
-    ${questionnaire.og_image ? `<meta property="og:image" content="${questionnaire.og_image}" />` : ''}
+    ${ogImageUrl ? `<meta property="og:image" content="${ogImageUrl}" />` : ''}
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="${title}" />
     <meta name="twitter:description" content="${description}" />
-    ${questionnaire.og_image ? `<meta name="twitter:image" content="${questionnaire.og_image}" />` : ''}
+    ${ogImageUrl ? `<meta name="twitter:image" content="${ogImageUrl}" />` : ''}
     `;
     
     // Insert OG tags before </head>

server/routes/admin.ts

@@ -1,14 +1,68 @@
 import { Router, Request, Response } from 'express';
 import { v4 as uuidv4 } from 'uuid';
 import crypto from 'crypto';
+import multer, { FileFilterCallback } from 'multer';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
 import { userOps, questionnaireOps, activityOps, participantOps } from '../database.js';
 import { requireAuth } from '../middleware/auth.js';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Configure multer for image uploads
+const uploadsDir = process.env.NODE_ENV === 'production' 
+  ? '/app/data/uploads'
+  : path.join(__dirname, '..', '..', 'data', 'uploads');
+
+// Ensure uploads directory exists
+if (!fs.existsSync(uploadsDir)) {
+  fs.mkdirSync(uploadsDir, { recursive: true });
+}
+
+const storage = multer.diskStorage({
+  destination: (_req: Request, _file: Express.Multer.File, cb: (error: Error | null, destination: string) => void) => {
+    cb(null, uploadsDir);
+  },
+  filename: (_req: Request, file: Express.Multer.File, cb: (error: Error | null, filename: string) => void) => {
+    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
+    const ext = path.extname(file.originalname);
+    cb(null, 'og-' + uniqueSuffix + ext);
+  }
+});
+
+const upload = multer({
+  storage,
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB max
+  fileFilter: (_req: Request, file: Express.Multer.File, cb: FileFilterCallback) => {
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    if (allowedTypes.includes(file.mimetype)) {
+      cb(null, true);
+    } else {
+      cb(new Error('Alleen JPEG, PNG, GIF en WebP afbeeldingen zijn toegestaan'));
+    }
+  }
+});
+
 const router = Router();
 
 // Apply auth middleware to all admin routes
 router.use(requireAuth);
 
+// Upload image
+router.post('/upload', upload.single('image'), (req: Request, res: Response) => {
+  const file = req.file as Express.Multer.File | undefined;
+  if (!file) {
+    res.status(400).json({ error: 'Geen bestand geüpload' });
+    return;
+  }
+  
+  // Return the URL to access the uploaded file
+  const imageUrl = `/uploads/${file.filename}`;
+  res.json({ success: true, url: imageUrl });
+});
+
 // Get all questionnaires
 router.get('/questionnaires', (_req: Request, res: Response) => {
   const questionnaires = questionnaireOps.getAll();