diff --git a/package-lock.json b/package-lock.json index 3e73d61..ed2a43e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "cors": "^2.8.5", "express": "^4.18.2", "express-session": "^1.17.3", + "multer": "^1.4.5-lts.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", @@ -26,6 +27,7 @@ "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/express-session": "^1.18.0", + "@types/multer": "^1.4.12", "@types/node": "^22.10.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -1426,6 +1428,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/multer": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/@types/multer/-/multer-1.4.13.tgz", + "integrity": "sha512-bhhdtPw7JqCiEfC9Jimx5LqX9BDIPJEh2q/fQ4bqbBPtyEZYr3cvF22NwG0DmPZNYA0CAf2CnqDB4KIGGpJcaw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/express": "*" + } + }, "node_modules/@types/node": { "version": "22.19.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz", @@ -1608,6 +1620,12 @@ "node": ">= 8" } }, + "node_modules/append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==", + "license": "MIT" + }, "node_modules/aproba": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.1.0.tgz", @@ -1892,6 +1910,23 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", + "license": "MIT" + }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -2098,6 +2133,51 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "license": "MIT" }, + "node_modules/concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "engines": [ + "node >= 0.8" + ], + "license": "MIT", + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/concat-stream/node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/concat-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/concat-stream/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/concurrently": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz", @@ -2185,6 +2265,12 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "license": "MIT" }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "license": "MIT" + }, "node_modules/cors": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", @@ -3106,6 +3192,12 @@ "node": ">=0.12.0" } }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" + }, "node_modules/jiti": { "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", @@ -3395,6 +3487,37 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "license": "MIT" }, + "node_modules/multer": { + "version": "1.4.5-lts.2", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.2.tgz", + "integrity": "sha512-VzGiVigcG9zUAoCNU+xShztrlr1auZOlurXynNvO9GiWD1/mTBbUljOKY+qMeazBqXgRnjzeEgJI/wyjJUHg9A==", + "deprecated": "Multer 1.x is impacted by a number of vulnerabilities, which have been patched in 2.x. You should upgrade to the latest 2.x version.", + "license": "MIT", + "dependencies": { + "append-field": "^1.0.0", + "busboy": "^1.0.0", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.4", + "object-assign": "^4.1.1", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/multer/node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -3857,6 +3980,12 @@ "node": ">=10" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -4480,6 +4609,14 @@ "node": ">= 0.8" } }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -4839,6 +4976,12 @@ "node": ">= 0.6" } }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==", + "license": "MIT" + }, "node_modules/typescript": { "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", @@ -5588,6 +5731,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "license": "ISC" }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "license": "MIT", + "engines": { + "node": ">=0.4" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 2f9ac0a..7e2ead2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "cors": "^2.8.5", "express": "^4.18.2", "express-session": "^1.17.3", + "multer": "^1.4.5-lts.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.0", @@ -29,6 +30,7 @@ "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/express-session": "^1.18.0", + "@types/multer": "^1.4.12", "@types/node": "^22.10.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/server/index.ts b/server/index.ts index e34ea6f..079cfa1 100644 --- a/server/index.ts +++ b/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 = ` - ${questionnaire.og_image ? `` : ''} + ${ogImageUrl ? `` : ''} - ${questionnaire.og_image ? `` : ''} + ${ogImageUrl ? `` : ''} `; // Insert OG tags before diff --git a/server/routes/admin.ts b/server/routes/admin.ts index 5cb3a63..6398a3c 100644 --- a/server/routes/admin.ts +++ b/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(); diff --git a/src/pages/QuestionnaireForm.tsx b/src/pages/QuestionnaireForm.tsx index 58c6383..c65072e 100644 --- a/src/pages/QuestionnaireForm.tsx +++ b/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(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) { + 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() {
-
diff --git a/vite.config.ts b/vite.config.ts index 2309f68..08f2394 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -16,6 +16,10 @@ export default defineConfig({ target: 'http://localhost:4000', changeOrigin: true, }, + '/uploads': { + target: 'http://localhost:4000', + changeOrigin: true, + }, }, }, build: {