🐛 Fix: Bildvorschau beim Upload wieder funktionsfähig

- Problem: getImageSrc() konnte nicht mit Blob-URLs von ausgewählten Upload-Dateien umgehen
- Lösung: Direkte Behandlung von Blob-URLs in ImageGalleryCard für Upload-Preview
- Erweitert: imageUtils.js um Blob-URL Unterstützung
- Hinzugefügt: Eindeutige IDs für Preview-Objekte in MultiUploadPage

Fixes #upload-preview-missing

frontend/src/Components/ComponentUtils/ImageGalleryCard.js

@@ -30,8 +30,14 @@ const ImageGalleryCard = ({
 
     if (mode === 'preview' || mode === 'single-image') {
         // Preview mode: display individual images
-        // Use preview image (optimized thumbnails for gallery)
-        previewUrl = getImageSrc(item, true);
+        
+        // Special handling for upload preview (blob URLs)
+        if (item.url && (item.url.startsWith('blob:') || item.url.startsWith('data:'))) {
+            previewUrl = item.url;
+        } else {
+            // Use standard image source logic for server images
+            previewUrl = getImageSrc(item, true);
+        }
         
         title = item.originalName || item.name || 'Bild';
         
@@ -40,7 +46,7 @@ const ImageGalleryCard = ({
             subtitle = `Aufnahme: ${new Date(item.captureDate).toLocaleDateString('de-DE')}`;
         }
         
-        itemId = item.id;
+        itemId = item.id || `fallback-${index}`;
     } else {
         // Group mode: display group information
         const group = item;

frontend/src/Components/Pages/MultiUploadPage.js

@@ -48,7 +48,8 @@ function MultiUploadPage() {
     console.log('handleImagesSelected called with:', newImages);
     
     // Convert File objects to preview objects with URLs
-    const imageObjects = newImages.map(file => ({
+    const imageObjects = newImages.map((file, index) => ({
+      id: `preview-${Date.now()}-${index}`, // Unique ID für Preview-Modus
       file: file, // Original File object for upload
       url: URL.createObjectURL(file), // Preview URL
       name: file.name,
@@ -59,7 +60,6 @@ function MultiUploadPage() {
     
     setSelectedImages(prev => {
       const updated = [...prev, ...imageObjects];
-      console.log('Updated selected images:', updated);
       return updated;
     });
   };
@@ -107,7 +107,7 @@ function MultiUploadPage() {
       Swal.fire({
         icon: 'warning',
         title: 'Pflichtfelder fehlen',
-        text: 'Bitte geben Sie Jahr und Titel an.',
+        text: 'Bitte gebe das Jahr und den Titel an.',
         confirmButtonColor: '#4CAF50'
       });
       return;

frontend/src/Utils/imageUtils.js

@@ -4,7 +4,7 @@
 
 /**
  * Get the optimal image source URL based on context
- * @param {Object} image - Image object from API
+ * @param {Object} image - Image object from API or preview object
  * @param {boolean} usePreview - Whether to prefer preview over original (default: true)
  * @returns {string} Image URL
  */
@@ -13,6 +13,11 @@ export const getImageSrc = (image, usePreview = true) => {
         return '';
     }
 
+    // For preview mode with blob URLs (file upload preview)
+    if (image.url && (image.url.startsWith('blob:') || image.url.startsWith('data:'))) {
+        return image.url;
+    }
+
     // If previews are enabled and available, use preview
     if (usePreview && image.previewPath) {
         // previewPath is just the filename, not a full path