s

admin-dashboard.html

@@ -737,6 +737,7 @@
                         
                         <!-- Upload Box -->
                         <div id="dropArea" class="upload-box">
+                            <input type="file" id="fileInput" accept="image/*" style="display: none;">
                             
                             <!-- Upload Prompt -->
                             <div id="uploadPrompt" class="upload-prompt text-center p-4">
@@ -750,8 +751,6 @@
                                 </button>
                                 <p class="small text-muted mt-2 mb-0">Podporované formáty: JPG, PNG, GIF (max. 5MB)</p>
                             </div>
-                            
-                            <!-- Image preview removed -->
                 </form>
                 
                 <div class="form-section">
@@ -762,8 +761,6 @@
                         </div>
                     </div>
                     
-                    <h3>Nastavení banneru</h3>
-                    
                     <div class="form-actions">
                         <button type="submit" id="saveBannerBtn" class="btn btn-primary">
                             <i class="fas fa-save"></i> Uložit banner
@@ -980,6 +977,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const uploadPrompt = document.getElementById('uploadPrompt');
     const uploadBtn = document.getElementById('uploadBtn');
     const dropArea = document.getElementById('dropArea');
+    const fileInput = document.getElementById('fileInput');
     
     // Image is always on the right side - no position selector needed
     
@@ -1028,22 +1026,45 @@ document.addEventListener('DOMContentLoaded', () => {
     });
     
     // Handle upload button click
-    uploadBtn.addEventListener('click', () => fileInput.click());
+    if (uploadBtn) {
-    
+        uploadBtn.addEventListener('click', () => fileInput.click());
-    // Handle change image button
-    if (changeImageBtn) {
-        changeImageBtn.addEventListener('click', () => fileInput.click());
     }
     
-    // Handle remove image button
+    // Handle drag and drop
-    if (removeImageBtn) {
+    ['dragenter', 'dragleave', 'drop'].forEach(eventName => {
-        removeImageBtn.addEventListener('click', function() {
+        dropArea.addEventListener(eventName, preventDefaults, false);
-            currentImage = null;
+    });
-            fileInput.value = '';
+    
-            if (uploadPrompt) uploadPrompt.style.display = 'flex';
+    function preventDefaults(e) {
-            if (imagePreview) imagePreview.style.display = 'none';
+        e.preventDefault();
-            updateBannerPreview();
+        e.stopPropagation();
-        });
+    }
+    
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false);
+    });
+    
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false);
+    });
+    
+    function highlight(e) {
+        dropArea.classList.add('highlight');
+    }
+    
+    function unhighlight(e) {
+        dropArea.classList.remove('highlight');
+    }
+    
+    // Handle drop
+    dropArea.addEventListener('drop', handleDrop, false);
+    
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        if (files.length > 0) {
+            handleFileSelect(files[0]);
+        }
     }
     
     // Handle drag and drop