diff --git a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js index c969793..e4c9b8c 100644 --- a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js +++ b/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; diff --git a/frontend/src/Components/Pages/MultiUploadPage.js b/frontend/src/Components/Pages/MultiUploadPage.js index 368d5c7..5168326 100644 --- a/frontend/src/Components/Pages/MultiUploadPage.js +++ b/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; diff --git a/frontend/src/Utils/imageUtils.js b/frontend/src/Utils/imageUtils.js index b7c440d..ead950d 100644 --- a/frontend/src/Utils/imageUtils.js +++ b/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