s

admin-dashboard.html

@@ -742,9 +742,30 @@ window.fetch = async function(resource, init = {}) {
 };
 
 // Image handling - Drag and Drop functionality
-const dragDropArea = document.getElementById('dragDropArea');
+let dragDropArea, uploadImageBtn, bannerImage;
-const uploadImageBtn = document.getElementById('uploadImageBtn');
+
-const bannerImage = document.getElementById('bannerImage');
+// Prevent default behavior for drag events
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+// Visual feedback when dragging over the area
+function highlight() {
+    if (dragDropArea) dragDropArea.classList.add('dragover');
+}
+
+function unhighlight() {
+    if (dragDropArea) dragDropArea.classList.remove('dragover');
+}
+
+// Initialize drag and drop functionality
+function initDragAndDrop() {
+    dragDropArea = document.getElementById('dragDropArea');
+    uploadImageBtn = document.getElementById('uploadImageBtn');
+    bannerImage = document.getElementById('bannerImage');
+
+    if (!dragDropArea || !uploadImageBtn || !bannerImage) return;
 
     // Click on drag area to select file
     dragDropArea.addEventListener('click', function() {
@@ -761,11 +782,6 @@ uploadImageBtn.addEventListener('click', function() {
         dragDropArea.addEventListener(eventName, preventDefaults, false);
     });
 
-function preventDefaults(e) {
-    e.preventDefault();
-    e.stopPropagation();
-}
-
     // Visual feedback when dragging over the area
     ['dragenter', 'dragover'].forEach(eventName => {
         dragDropArea.addEventListener(eventName, highlight, false);
@@ -775,16 +791,14 @@ function preventDefaults(e) {
         dragDropArea.addEventListener(eventName, unhighlight, false);
     });
 
-function highlight() {
-    dragDropArea.classList.add('dragover');
-}
-
-function unhighlight() {
-    dragDropArea.classList.remove('dragover');
-}
-
     // Handle dropped files
     dragDropArea.addEventListener('drop', handleDrop, false);
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initDragAndDrop);
+
+// Handle dropped files
 
 function handleDrop(e) {
     const dt = e.dataTransfer;