feat :ability to drag and drop

app/templates/upload.html

@@ -53,8 +53,12 @@
             <!-- File Input -->
             <div id="file_input" style="display: none;">
                 <label class="block font-mono text-sm text-gray-400 mb-2">Files (Multiple allowed)</label>
-                <input type="file" name="files" multiple
-                    class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono focus:outline-none focus:border-blue-500 transition file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-500/20 file:text-blue-400 file:font-mono file:text-sm hover:file:bg-blue-500/30">
+                <div id="file_dropzone" class="w-full border-2 border-dashed border-white/20 bg-white/5 rounded-xl px-4 py-8 text-center transition cursor-pointer hover:border-blue-500/60 hover:bg-blue-500/5">
+                    <p class="font-mono text-sm text-gray-300">Drop files here or click to browse</p>
+                    <p id="selected_file_count" class="font-mono text-xs text-gray-500 mt-2">No files selected</p>
+                    <input id="files" type="file" name="files" multiple
+                        class="hidden w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 font-mono focus:outline-none focus:border-blue-500 transition file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-500/20 file:text-blue-400 file:font-mono file:text-sm hover:file:bg-blue-500/30">
+                </div>
             </div>
             
             <!-- Link Input -->
@@ -77,18 +81,77 @@
 </div>
 
 <script>
+    const noteTypeInput = document.getElementById('note_type');
+    const fileInput = document.getElementById('file_input');
+    const linkInput = document.getElementById('link_input');
+    const dropzone = document.getElementById('file_dropzone');
+    const filesField = document.getElementById('files');
+    const fileCount = document.getElementById('selected_file_count');
+
+    function updateSelectedFileText(files) {
+        if (!files || files.length === 0) {
+            fileCount.textContent = 'No files selected';
+            return;
+        }
+
+        fileCount.textContent = files.length === 1
+            ? `Selected: ${files[0].name}`
+            : `${files.length} files selected`;
+    }
+
     function toggleInputType() {
-        const type = document.getElementById('note_type').value;
-        const fileInput = document.getElementById('file_input');
-        const linkInput = document.getElementById('link_input');
-        
+        const type = noteTypeInput.value;
+
         if (type === 'file') {
             fileInput.style.display = 'block';
             linkInput.style.display = 'none';
         } else if (type === 'link') {
             fileInput.style.display = 'none';
             linkInput.style.display = 'block';
+        } else {
+            fileInput.style.display = 'none';
+            linkInput.style.display = 'none';
         }
     }
+
+    dropzone.addEventListener('click', () => filesField.click());
+
+    filesField.addEventListener('change', () => {
+        updateSelectedFileText(filesField.files);
+    });
+
+    ['dragenter', 'dragover'].forEach((eventName) => {
+        dropzone.addEventListener(eventName, (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            dropzone.classList.add('border-blue-500', 'bg-blue-500/10');
+        });
+    });
+
+    ['dragleave', 'drop'].forEach((eventName) => {
+        dropzone.addEventListener(eventName, (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            dropzone.classList.remove('border-blue-500', 'bg-blue-500/10');
+        });
+    });
+
+    dropzone.addEventListener('drop', (event) => {
+        if (!event.dataTransfer || !event.dataTransfer.files.length) {
+            return;
+        }
+
+        try {
+            filesField.files = event.dataTransfer.files;
+        } catch (error) {
+            const dt = new DataTransfer();
+            Array.from(event.dataTransfer.files).forEach((file) => dt.items.add(file));
+            filesField.files = dt.files;
+        }
+
+        updateSelectedFileText(filesField.files);
+    });
+
+    toggleInputType();
 </script>
-{% endblock %}
+{% endblock %}