backend/routes/upload.js

@@ -29,9 +29,11 @@ router.post('/upload', upload.single('image'), async (req, res) => {
     const { title, description } = req.body;
     const filename = req.file.filename;
 
+    const uploader = req.user ? req.user.displayName : 'Anonym';
+
     await pool.query(
-        'INSERT INTO images (filename, title, description) VALUES ($1, $2, $3)',
-        [filename, title, description]
+        'INSERT INTO images (filename, title, description, uploader) VALUES ($1, $2, $3, $4)',
+        [filename, title, description, uploader]
     );
 
     res.redirect('/');

backend/server.js

@@ -10,18 +10,17 @@ import { fileURLToPath } from 'url';
 
 import pool from './db.js';
 
-const initDB = async () => {
-  await pool.query(`
-    CREATE TABLE IF NOT EXISTS images (
-      id SERIAL PRIMARY KEY,
-      filename TEXT NOT NULL,
-      title TEXT NOT NULL,
-      description TEXT NOT NULL,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-};
-initDB();
+await pool.query(`
+  CREATE TABLE IF NOT EXISTS images (
+    id SERIAL PRIMARY KEY,
+    filename TEXT NOT NULL,
+    title TEXT NOT NULL,
+    description TEXT NOT NULL,
+    uploader TEXT,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+  );
+`);
+
 
 dotenv.config();
 
@@ -44,7 +43,8 @@ app.get('/', async (req, res) => {
   const images = result.rows.map(img => ({
     title: img.title,
     description: img.description,
-    path: `/uploads/${img.filename}`
+    path: `/uploads/${img.filename}`,
+    uploader: img.uploader || 'Unbekannt'
   }));
 
   res.render('index', { user: req.user, images });

backend/views/index.ejs

@@ -32,7 +32,10 @@
         <article>
           <h3><%= img.title %></h3>
           <p><%= img.description %></p>
-          <img src="<%= img.path %>" alt="Bild" style="max-width: 100%; border-radius: 8px;" />
+          <figure>
+            <img src="<%= img.path %>" alt="<%= img.title %>" style="max-width: 100%; border-radius: 8px;" />
+            <figcaption>Hochgeladen von <strong><%= img.uploader %></strong></figcaption>
+          </figure>
         </article>
       <% }) %>
     <% } %>