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

@@ -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']] });