Fixed pic upload page relation

controllers/imageController.js

@@ -1,4 +1,4 @@
-const { Image } = require('../models');
+const { Image, MenuItem, Page } = require('../models');
 const { v4: uuidv4 } = require('uuid');
 const multer = require('multer');
 const path = require('path');
@@ -17,17 +17,33 @@ const upload = multer({ storage });
 
 exports.uploadImage = upload.single('image');
 
+exports.getAllPages = async (req, res) => {
+  try {
+    const pages = await MenuItem.findAll();
+    res.status(200).json(pages.map((item) => {return { link: item.link, name: item.name}; }));
+  } catch (error) {
+    console.log(error);
+    res.status(500).send('Fehler beim Auslesen');
+  }
+}
+
 exports.saveImageDetails = async (req, res) => {
   try {
-    const { title, description, pageId } = req.body;
+    const { title, description, page } = req.body;
     const filename = req.file.filename;
+    const pageItem = await Page.findAll({ where: { link: page } });
+    console.log(pageItem)
     const newImage = await Image.create({
       id: uuidv4(),
       filename,
       title,
       description,
-      pageId: pageId || null
+      pageId: pageItem && pageItem[0] ? pageItem[0].id : null
     });
+    if (page) {
+      const imageUrl = `/uploads/${filename}`;
+      await MenuItem.update({ image: imageUrl }, { where: { link: page} });
+    }
     res.status(201).json(newImage);
   } catch (error) {
     console.error('Fehler beim Speichern des Bildes:', error);

routes/image.js

@@ -1,12 +1,14 @@
 const express = require('express');
 const router = express.Router();
-const { uploadImage, saveImageDetails, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
+const { getAllPages, uploadImage, saveImageDetails, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
 const authMiddleware = require('../middleware/authMiddleware')
 
 router.post('/', authMiddleware, uploadImage, saveImageDetails);
 router.get('/', authMiddleware, getImages);
 router.get('/page/:pageId', getImagesByPage);
+router.put('/hash/:id', getImageByHash);
+router.get('/pages', getAllPages);
 router.get('/:id', getImageById);
 router.put('/:id', authMiddleware, updateImage);
-router.put('/hash/:id', getImageByHash);
+
 module.exports = router;

src/content/admin/ImageUpload.vue

@@ -18,7 +18,7 @@
         <label for="page">Seite</label>
         <select id="page" v-model="selectedPage">
           <option value="">Keine Seite</option>
-            <option v-for="page in pages" :key="page.id" :value="page.id">{{ page.title }}</option>
+          <option v-for="page in pages" :key="page.value" :value="page.value">{{ page.caption }}</option>
         </select>
       </div>
       <button type="submit">Hochladen</button>
@@ -63,7 +63,7 @@
       formData.append('title', this.title);
       formData.append('description', this.description);
       formData.append('image', this.image);
-        formData.append('pageId', this.selectedPage);
+      formData.append('page', this.selectedPage);
 
       try {
         await axios.post('/image/', formData);
@@ -83,8 +83,18 @@
     },
     async fetchPages() {
       try {
-          const response = await axios.get('/image/pages');
-          this.pages = response.data;
+        const response = await axios.get('/menu-data');
+        const buildRecursive = function (data, prefix = '') {
+          return data.flatMap(item => {
+            let children = [];
+            if (item.submenu && item.submenu.length) {
+              children = buildRecursive(item.submenu, prefix + item.name + " -> ");
+            }
+            return [{ value: item.link, caption: prefix + item.name }, ...children];
+          });
+        };
+
+        this.pages = buildRecursive(response.data);
       } catch (error) {
         console.error('Fehler beim Abrufen der Seiten:', error);
       }
@@ -119,16 +129,17 @@
 form div {
   margin-bottom: 10px;
 }
+
 .uploaded-image {
   display: inline-block;
   margin: 0 0 0.5em 0.5em;
   border: 1px solid #e0e0e0;
   padding: 10px;
 }
+
 .uploaded-image input,
 .uploaded-image textarea {
   width: 100%;
   margin: 5px 0;
 }
 </style>
-