Merge pull request #72 from 01bps/main-dragdrop

Add page-wide drag and drop functionality for file uploads
KathiraveluLab · Feb 18, 2025 · 4b4a703 · 4b4a703
2 parents f9f9eb3 + b1e76e4
commit 4b4a703
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/static/js/dragdrop.js b/static/js/dragdrop.js
@@ -0,0 +1,67 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const fileInput = document.querySelector('input[type="file"]');
+    const uploadButton = document.getElementById('uploadButton');
+    const fileError = document.getElementById('fileError');
+    const allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf'];
+
+    //Validating dropped file
+    function validateFile(file) {
+        const fileExtension = file.name.split('.').pop().toLowerCase();
+        if (!allowedTypes.includes(fileExtension)) {
+            uploadButton.disabled = true;
+            fileError.style.display = 'block';
+            fileInput.value = ''; // Clear the file input
+            return false;
+        }
+        uploadButton.disabled = false;
+        fileError.style.display = 'none';
+        return true;
+    }
+
+    // Prevent default drag behaviors
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        document.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    // Changing the Opacity for better visual
+    ['dragenter', 'dragover'].forEach(eventName => {
+        document.addEventListener(eventName, highlight, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        document.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight(e) {
+        document.body.style.opacity = '0.7';
+        document.body.style.transition = 'opacity 0.2s ease';
+    }
+
+    function unhighlight(e) {
+        document.body.style.opacity = '1';
+    }
+
+    document.addEventListener('drop', function(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+
+        if (files.length > 0) {
+            const file = files[0];
+            if (validateFile(file)) {
+                // Update the file input with the dropped file
+                fileInput.files = files;
+
+                // Show upload form if hidden
+                const uploadForm = document.getElementById('uploadForm');
+                if (uploadForm.style.display === 'none' || uploadForm.style.display === '') {
+                    uploadForm.style.display = 'block';
+                }
+            }
+        }
+    });
+});
diff --git a/templates/profile.html b/templates/profile.html
@@ -57,14 +57,15 @@
         }
 
     </script>
+    <script src="{{ url_for('static', filename='js/dragdrop.js') }}"></script>
 </head>
 <body>
     <div class="nav">
         <h1>{{ username }}</h1>
     </div>
 
     <div class="button-container">
-        <button class="toggle" onclick="toggleUploadForm()">Upload Images</button>
+        <button class="toggle" onclick="toggleUploadForm()">Click to Upload or Drag & Drop Anywhere</button>
         <button class="logout-button"><a href="{{ url_for('logout') }}">Logout</a></button>
     </div>