🐛 Fix critical file upload and download issues

- Fix file input click handler - enable pointer-events on upload-content
- Add direct click handler on upload-content element
- Add automatic scroll to results after file processing
- Improve download button event handling with better error checking
- Replace alert with toast notification for better UX
- Reset file input after selection to allow re-selecting same file
- Update cache-busting to v=4

Author: kiku-jw

docs/assets/app.js

@@ -192,9 +192,22 @@ class App {
             }
             // Trigger file input click
             if (this.fileInput) {
+                e.preventDefault();
+                e.stopPropagation();
                 this.fileInput.click();
             }
         });
+        
+        // Also make upload-content clickable (bypass pointer-events: none)
+        const uploadContent = this.uploadArea.querySelector('.upload-content');
+        if (uploadContent) {
+            uploadContent.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (this.fileInput) {
+                    this.fileInput.click();
+                }
+            });
+        }
 
         // Drag and drop
         this.uploadArea.addEventListener('dragover', (e) => {
@@ -229,13 +242,18 @@ class App {
         );
 
         if (validFiles.length === 0) {
-            alert('Please upload .txt or .docx files only.');
+            this.showToast('Please upload .txt or .docx files only.', 'error');
             return;
         }
 
         this.files.push(...validFiles);
         this.updateFileList();
         this.processFiles();
+        
+        // Reset file input to allow selecting the same file again
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
     }
 
     updateFileList() {
@@ -304,6 +322,11 @@ class App {
 
         this.results = results;
         this.displayResults(results, totalStats);
+        
+        // Scroll to results section after processing
+        setTimeout(() => {
+            this.resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }, 100);
     }
 
     displayResults(results, totalStats) {
@@ -384,15 +407,19 @@ class App {
         // Setup download and copy buttons
         document.querySelectorAll('.download-btn').forEach(btn => {
             btn.addEventListener('click', (e) => {
-                const index = parseInt(e.target.dataset.index);
-                this.downloadFile(results[index]);
+                const index = parseInt(e.target.dataset.index || e.target.closest('.download-btn').dataset.index);
+                if (results[index]) {
+                    this.downloadFile(results[index]);
+                }
             });
         });
 
         document.querySelectorAll('.copy-btn').forEach(btn => {
             btn.addEventListener('click', (e) => {
-                const index = parseInt(e.target.dataset.index);
-                this.copyToClipboard(results[index].cleanedText);
+                const index = parseInt(e.target.dataset.index || e.target.closest('.copy-btn').dataset.index);
+                if (results[index]) {
+                    this.copyToClipboard(results[index].cleanedText);
+                }
             });
         });
     }

docs/assets/style.css

@@ -170,8 +170,9 @@ body {
 }
 
 .upload-content {
-    pointer-events: none;
+    pointer-events: auto;
     user-select: none;
+    cursor: pointer;
 }
 
 .upload-icon {

docs/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DocStripper - Batch Document Cleaner</title>
     <meta name="description" content="DocStripper - Remove noise from text documents automatically. Clean page numbers, headers, footers, duplicates, and empty lines.">
-    <link rel="stylesheet" href="assets/style.css?v=3">
+    <link rel="stylesheet" href="assets/style.css?v=4">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧹</text></svg>">
 </head>
 <body>
@@ -180,6 +180,6 @@ <h2>Prefer Command Line?</h2>
         </div>
     </footer>
 
-    <script src="assets/app.js?v=3"></script>
+    <script src="assets/app.js?v=4"></script>
 </body>
 </html>