From e44950d8572cd2def953de1dd75e564394b1a468 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 29 Apr 2026 13:36:35 +0200
Subject: [PATCH] Add bulk image upload functionality: Implement new routes and
 methods for handling bulk image uploads in the imageController. Update
 ImageUpload component to support switching between single and bulk upload
 modes, including form handling for multiple images, base title, start number,
 and optional page association. Enhance user experience with improved form
 validation and reset functionality.

---
 controllers/imageController.js    | 46 ++++++++++++++++
 routes/image.js                   |  3 +-
 src/content/admin/ImageUpload.vue | 91 ++++++++++++++++++++++++++++++-
 3 files changed, 138 insertions(+), 2 deletions(-)

diff --git a/controllers/imageController.js b/controllers/imageController.js
index a0cf442..46d405f 100644
--- a/controllers/imageController.js
+++ b/controllers/imageController.js
@@ -16,6 +16,7 @@ const storage = multer.diskStorage({
 const upload = multer({ storage });
 
 exports.uploadImage = upload.single('image');
+exports.uploadImages = upload.array('images');
 
 exports.getAllPages = async (req, res) => {
   try {
@@ -51,6 +52,51 @@ exports.saveImageDetails = async (req, res) => {
   }
 };
 
+exports.saveImageDetailsBulk = async (req, res) => {
+  try {
+    const { baseTitle, description, page, startNumber } = req.body;
+    const files = req.files || [];
+
+    if (!baseTitle || !String(baseTitle).trim()) {
+      return res.status(400).json({ error: 'Bitte einen Basis-Titel angeben.' });
+    }
+    if (files.length === 0) {
+      return res.status(400).json({ error: 'Bitte mindestens ein Bild auswählen.' });
+    }
+
+    const pageItem = page ? await Page.findAll({ where: { link: page } }) : [];
+    const pageId = pageItem && pageItem[0] ? pageItem[0].id : null;
+    const firstNumber = Number.parseInt(startNumber, 10);
+    const startAt = Number.isFinite(firstNumber) ? firstNumber : 1;
+
+    const createdImages = [];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const runningNumber = startAt + i;
+      const title = `${String(baseTitle).trim()} ${runningNumber}`;
+      const newImage = await Image.create({
+        id: uuidv4(),
+        filename: file.filename,
+        title,
+        description: description || '',
+        pageId,
+      });
+      createdImages.push(newImage);
+    }
+
+    // Menübild nur dann setzen, wenn genau ein Bild hochgeladen wurde.
+    if (page && createdImages.length === 1) {
+      const imageUrl = `/uploads/${createdImages[0].filename}`;
+      await MenuItem.update({ image: imageUrl }, { where: { link: page } });
+    }
+
+    res.status(201).json(createdImages);
+  } catch (error) {
+    console.error('Fehler beim Bulk-Upload der Bilder:', error);
+    res.status(500).json({ error: 'Fehler beim Bulk-Upload der Bilder' });
+  }
+};
+
 exports.getImages = async (req, res) => {
   try {
     const images = await Image.findAll({ order: [['title', 'ASC']] });
diff --git a/routes/image.js b/routes/image.js
index f0c58e2..dd33009 100644
--- a/routes/image.js
+++ b/routes/image.js
@@ -1,9 +1,10 @@
 const express = require('express');
 const router = express.Router();
-const { getAllPages, uploadImage, saveImageDetails, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
+const { getAllPages, uploadImage, uploadImages, saveImageDetails, saveImageDetailsBulk, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
 const authMiddleware = require('../middleware/authMiddleware')
 
 router.post('/', authMiddleware, uploadImage, saveImageDetails);
+router.post('/bulk', authMiddleware, uploadImages, saveImageDetailsBulk);
 router.get('/', authMiddleware, getImages);
 router.get('/page/:pageId', getImagesByPage);
 router.put('/hash/:id', getImageByHash);
diff --git a/src/content/admin/ImageUpload.vue b/src/content/admin/ImageUpload.vue
index c8a7d2f..e879839 100644
--- a/src/content/admin/ImageUpload.vue
+++ b/src/content/admin/ImageUpload.vue
@@ -1,7 +1,16 @@
 <template>
   <div>
     <h1>Bild hochladen</h1>
-    <form @submit.prevent="uploadImage">
+    <div class="upload-mode-switch">
+      <button type="button" :class="{ active: uploadMode === 'single' }" @click="uploadMode = 'single'">
+        Einzel-Upload
+      </button>
+      <button type="button" :class="{ active: uploadMode === 'bulk' }" @click="uploadMode = 'bulk'">
+        Bulk-Upload
+      </button>
+    </div>
+
+    <form v-if="uploadMode === 'single'" @submit.prevent="uploadImage">
       <div>
         <label for="title">Titel</label>
         <input type="text" id="title" v-model="title" />
@@ -24,6 +33,38 @@
       <button type="submit">Hochladen</button>
     </form>
 
+    <form v-else @submit.prevent="uploadImagesBulk">
+      <h2>Bulk-Upload</h2>
+      <div>
+        <label for="bulkBaseTitle">Basis-Titel</label>
+        <input type="text" id="bulkBaseTitle" v-model="bulkBaseTitle" placeholder="z. B. Gemeindebrief Bild" required />
+      </div>
+      <div>
+        <label for="bulkStartNumber">Startnummer</label>
+        <input type="number" id="bulkStartNumber" v-model.number="bulkStartNumber" min="1" />
+      </div>
+      <div>
+        <label for="bulkDescription">Beschreibung</label>
+        <textarea id="bulkDescription" v-model="bulkDescription"></textarea>
+      </div>
+      <div>
+        <label for="bulkImages">Bilder</label>
+        <input type="file" id="bulkImages" ref="bulkImagesInput" @change="onBulkFilesChange" accept="image/*" multiple />
+      </div>
+      <div>
+        <label for="bulkPage">Seite</label>
+        <select id="bulkPage" v-model="bulkSelectedPage">
+          <option value="">Keine Seite</option>
+          <option v-for="page in pages" :key="`bulk-${page.value}`" :value="page.value">{{ page.caption }}</option>
+        </select>
+      </div>
+      <p v-if="bulkFiles.length > 0">
+        {{ bulkFiles.length }} Datei(en) ausgewählt.
+        Erste Titel-Vorschau: <strong>{{ bulkBaseTitle || 'Titel' }} {{ bulkStartNumber }}</strong>
+      </p>
+      <button type="submit" :disabled="bulkFiles.length === 0">Bulk hochladen</button>
+    </form>
+
     <div v-if="images.length">
       <h2>Hochgeladene Bilder</h2>
       <div v-for="image in images" :key="image.id" class="uploaded-image">
@@ -47,7 +88,13 @@ export default {
       title: '',
       description: '',
       image: null,
+      bulkBaseTitle: '',
+      bulkStartNumber: 1,
+      bulkDescription: '',
+      bulkFiles: [],
+      bulkSelectedPage: '',
       selectedPage: '',
+      uploadMode: 'single',
       pages: [],
       images: []
     };
@@ -58,6 +105,9 @@ export default {
     onFileChange(e) {
       this.image = e.target.files[0];
     },
+    onBulkFilesChange(e) {
+      this.bulkFiles = Array.from(e.target.files || []);
+    },
     async uploadImage() {
       const formData = new FormData();
       formData.append('title', this.title);
@@ -81,6 +131,25 @@ export default {
         console.error('Fehler beim Abrufen der Bilder:', error);
       }
     },
+    async uploadImagesBulk() {
+      if (!this.bulkBaseTitle || this.bulkFiles.length === 0) {
+        return;
+      }
+      const formData = new FormData();
+      formData.append('baseTitle', this.bulkBaseTitle);
+      formData.append('startNumber', this.bulkStartNumber);
+      formData.append('description', this.bulkDescription);
+      formData.append('page', this.bulkSelectedPage);
+      this.bulkFiles.forEach((file) => formData.append('images', file));
+
+      try {
+        await axios.post('/image/bulk', formData);
+        this.fetchImages();
+        this.resetBulkForm();
+      } catch (error) {
+        console.error('Fehler beim Bulk-Upload der Bilder:', error);
+      }
+    },
     async fetchPages() {
       try {
         const response = await axios.get('/menu-data');
@@ -116,6 +185,16 @@ export default {
       this.image = null;
       this.selectedPage = '';
       document.getElementById('image').value = null;
+    },
+    resetBulkForm() {
+      this.bulkBaseTitle = '';
+      this.bulkStartNumber = 1;
+      this.bulkDescription = '';
+      this.bulkFiles = [];
+      this.bulkSelectedPage = '';
+      if (this.$refs.bulkImagesInput) {
+        this.$refs.bulkImagesInput.value = null;
+      }
     }
   },
   mounted() {
@@ -142,4 +221,14 @@ form div {
   width: 100%;
   margin: 5px 0;
 }
+
+.upload-mode-switch {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.upload-mode-switch button.active {
+  font-weight: bold;
+}
 </style>
\ No newline at end of file