Add files via upload

admin-dashboard.html

@@ -464,13 +464,13 @@
 
     <script>
         // Get token and check authentication
-        const token = localStorage.getItem('token');
-        if (!token) {
+const token = localStorage.getItem('token');
+if (!token) {
     window.location.href = '/login.html';
-        }
+}
 
-        // Show notification to user
-        function showNotification(message, type = 'info') {
+// Show notification to user
+function showNotification(message, type = 'info') {
     const notification = document.createElement('div');
     notification.className = `notification ${type}`;
     
@@ -493,11 +493,11 @@
         notification.classList.add('fade-out');
         setTimeout(() => notification.remove(), 300);
     }, delay);
-        }
+}
 
-        // Override fetch to include token
-        const originalFetch = window.fetch;
-        window.fetch = async function(resource, init = {}) {
+// Override fetch to include token (but NOT for FormData requests)
+const originalFetch = window.fetch;
+window.fetch = async function(resource, init = {}) {
     // Add token to headers if it's an API request
     if (typeof resource === 'string' && resource.startsWith('/api/')) {
         const headers = new Headers(init.headers || {});
@@ -505,8 +505,8 @@
             headers.set('Authorization', `Bearer ${token}`);
         }
         
-                // Set content type if not set
-                if (!headers.has('Content-Type') && init.body) {
+        // Only set content type if not FormData (FormData sets its own)
+        if (!headers.has('Content-Type') && init.body && !(init.body instanceof FormData)) {
             headers.set('Content-Type', 'application/json');
         }
         
@@ -514,15 +514,15 @@
     }
     
     return originalFetch(resource, init);
-        };
+};
 
-        // Image handling
-        document.getElementById('uploadImageBtn').addEventListener('click', function() {
+// Image handling
+document.getElementById('uploadImageBtn').addEventListener('click', function() {
     document.getElementById('bannerImage').click();
-        });
+});
 
-        // Handle image upload
-        function handleImageUpload(event) {
+// Handle image upload
+function handleImageUpload(event) {
     const fileInput = event.target;
     const file = fileInput.files[0];
     
@@ -582,36 +582,36 @@
     };
     
     reader.readAsDataURL(file);
-        }
+}
 
-        // Logout functionality
-        document.getElementById('logoutBtn').addEventListener('click', function() {
+// Logout functionality
+document.getElementById('logoutBtn').addEventListener('click', function() {
     localStorage.removeItem('token');
     window.location.href = '/';
-        });
+});
 
-        // DOM Elements
-        const bannerText = document.getElementById('bannerText');
-        const bannerVisible = document.getElementById('bannerVisible');
-        const bannerBgColor = document.getElementById('bannerBgColor');
-        const bannerTextColor = document.getElementById('bannerTextColor');
-        const bannerTextAlign = document.getElementById('bannerTextAlign');
-        const bannerFontSize = document.getElementById('bannerFontSize');
-        const bannerPadding = document.getElementById('bannerPadding');
-        const bannerMargin = document.getElementById('bannerMargin');
-        const bannerBorderRadius = document.getElementById('bannerBorderRadius');
-        const bannerPreview = document.getElementById('bannerPreview');
-        const bannerPreviewContent = bannerPreview.querySelector('.banner-preview-content');
-        const bannerPreviewText = bannerPreview.querySelector('.banner-preview-text');
-        const bannerPreviewBg = bannerPreview.querySelector('.banner-preview-bg');
-        const bgColorPreview = document.getElementById('bgColorPreview');
-        const textColorPreview = document.getElementById('textColorPreview');
-        const saveBannerBtn = document.getElementById('saveBannerBtn');
-        const stylePresets = document.querySelectorAll('.style-preset');
-        let currentImage = null;
+// DOM Elements
+const bannerText = document.getElementById('bannerText');
+const bannerVisible = document.getElementById('bannerVisible');
+const bannerBgColor = document.getElementById('bannerBgColor');
+const bannerTextColor = document.getElementById('bannerTextColor');
+const bannerTextAlign = document.getElementById('bannerTextAlign');
+const bannerFontSize = document.getElementById('bannerFontSize');
+const bannerPadding = document.getElementById('bannerPadding');
+const bannerMargin = document.getElementById('bannerMargin');
+const bannerBorderRadius = document.getElementById('bannerBorderRadius');
+const bannerPreview = document.getElementById('bannerPreview');
+const bannerPreviewContent = bannerPreview.querySelector('.banner-preview-content');
+const bannerPreviewText = bannerPreview.querySelector('.banner-preview-text');
+const bannerPreviewBg = bannerPreview.querySelector('.banner-preview-bg');
+const bgColorPreview = document.getElementById('bgColorPreview');
+const textColorPreview = document.getElementById('textColorPreview');
+const saveBannerBtn = document.getElementById('saveBannerBtn');
+const stylePresets = document.querySelectorAll('.style-preset');
+let currentImage = null;
 
-        // Preset styles
-        const presets = {
+// Preset styles
+const presets = {
     info: {
         backgroundColor: '#cce5ff',
         textColor: '#004085',
@@ -632,10 +632,10 @@
         textColor: '#721c24',
         textAlign: 'center'
     }
-        };
+};
 
-        // Load current banner
-        async function loadBanner() {
+// Load current banner
+async function loadBanner() {
     try {
         const response = await fetch('/api/banner');
         if (!response.ok) {
@@ -708,9 +708,9 @@
         console.error('Chyba při načítání banneru:', error);
         showNotification('Chyba při načítání banneru', 'error');
     }
-        }
+}
 
-        async function saveBanner(event) {
+async function saveBanner(event) {
     event.preventDefault();
     
     const form = document.getElementById('bannerForm');
@@ -750,7 +750,7 @@
             console.log(key, value);
         }
         
-                // Create headers object
+        // Create headers object - DO NOT set Content-Type for FormData!
         const headers = {};
         
         // Add Authorization header if token exists
@@ -759,12 +759,10 @@
             headers['Authorization'] = `Bearer ${token}`;
         }
         
-                // Note: Don't set Content-Type header when using FormData with files
-                // The browser will set it automatically with the correct boundary
-                
+        // Send request with FormData (browser will set correct Content-Type with boundary)
         const response = await fetch('/api/banner/update', {
             method: 'POST',
-                    headers: headers,
+            headers: headers, // No Content-Type header!
             body: formData
         });
 
@@ -817,10 +815,10 @@
             submitButton.innerHTML = originalButtonText;
         }
     }
-        }
+}
 
-        // Update color previews
-        function updateColorPreviews() {
+// Update color previews
+function updateColorPreviews() {
     const bgColorPreview = document.getElementById('bgColorPreview');
     const textColorPreview = document.getElementById('textColorPreview');
     
@@ -831,10 +829,10 @@
     if (textColorPreview) {
         textColorPreview.style.backgroundColor = document.getElementById('bannerTextColor').value;
     }
-        }
+}
 
-        // Remove image
-        function removeImage() {
+// Remove image
+function removeImage() {
     const bannerImage = document.getElementById('bannerImage');
     const imagePreview = document.getElementById('imagePreview');
     const imagePreviewContainer = document.getElementById('imagePreviewContainer');
@@ -874,10 +872,10 @@
         const event = new Event('change');
         bannerImage.dispatchEvent(event);
     }
-        }
+}
 
-        // Update banner preview
-        function updateBannerPreview() {
+// Update banner preview
+function updateBannerPreview() {
     const bannerPreview = document.getElementById('bannerPreview');
     const bannerPreviewText = bannerPreview?.querySelector('.banner-preview-text');
     const bannerPreviewBg = bannerPreview?.querySelector('.banner-preview-bg');
@@ -968,10 +966,10 @@
     
     // Make sure the preview is visible
     bannerPreview.style.visibility = 'visible';
-        }
+}
 
-        // Apply preset
-        function applyPreset(preset) {
+// Apply preset
+function applyPreset(preset) {
     const style = presets[preset];
     if (!style) return;
     
@@ -981,32 +979,32 @@
     
     updateColorPreviews();
     updateBannerPreview();
-        }
+}
 
-        // Event Listeners
-        bannerBgColor.addEventListener('input', () => {
+// Event Listeners
+bannerBgColor.addEventListener('input', () => {
     updateColorPreviews();
     updateBannerPreview();
-        });
+});
 
-        bannerTextColor.addEventListener('input', () => {
+bannerTextColor.addEventListener('input', () => {
     updateColorPreviews();
     updateBannerPreview();
-        });
+});
 
-        [bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
+[bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
     el.addEventListener('change', updateBannerPreview);
     el.addEventListener('input', updateBannerPreview);
-        });
+});
 
-        stylePresets.forEach(preset => {
+stylePresets.forEach(preset => {
     preset.addEventListener('click', () => applyPreset(preset.dataset.preset));
-        });
+});
 
-        saveBannerBtn.addEventListener('click', saveBanner);
+saveBannerBtn.addEventListener('click', saveBanner);
 
-        // Load banner when page loads
-        document.addEventListener('DOMContentLoaded', loadBanner);
+// Load banner when page loads
+document.addEventListener('DOMContentLoaded', loadBanner);
     </script>
 </body>
 </html>