🐛 Fix file upload and improve UX

kiku-jw · kiku-jw · commit c042325e015b · 2025-10-31T17:03:38.000+02:00
- Remove preview mode checkbox (confusing for users)
- Fix file input click handler - ensure it works properly
- Improve Clear button functionality with toast notification
- Add better error handling for missing elements
- Update cache-busting to v=3
diff --git a/docs/assets/app.js b/docs/assets/app.js
@@ -174,14 +174,26 @@ class App {
         this.fileList = document.getElementById('fileList');
         this.resultsSection = document.getElementById('resultsSection');
         this.resultsContainer = document.getElementById('resultsContainer');
-        this.dryRunCheck = document.getElementById('dryRunCheck');
         this.clearBtn = document.getElementById('clearBtn');
+        
+        // Check if elements exist
+        if (!this.uploadArea || !this.fileInput) {
+            console.error('Required elements not found');
+            return;
+        }
     }
 
     setupEventListeners() {
-        // Click to upload
-        this.uploadArea.addEventListener('click', () => {
-            this.fileInput.click();
+        // Click to upload - ensure it works even if upload-content is clicked
+        this.uploadArea.addEventListener('click', (e) => {
+            // Don't trigger if clicking on remove button or other interactive elements
+            if (e.target.closest('.remove-file') || e.target.closest('.btn')) {
+                return;
+            }
+            // Trigger file input click
+            if (this.fileInput) {
+                this.fileInput.click();
+            }
         });
 
         // Drag and drop
@@ -338,7 +350,6 @@ class App {
                 return;
             }
 
-            const isDryRun = this.dryRunCheck.checked;
             const displayText = result.cleanedText;
 
             html += `
@@ -421,11 +432,18 @@ class App {
     }
 
     clearAll() {
+        if (this.files.length === 0) {
+            return;
+        }
+        
         this.files = [];
         this.results = [];
-        this.fileInput.value = '';
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
         this.updateFileList();
         this.resultsSection.style.display = 'none';
+        this.showToast('All files cleared');
     }
 
     formatFileSize(bytes) {
diff --git a/docs/assets/style.css b/docs/assets/style.css
@@ -171,6 +171,7 @@ body {
 
 .upload-content {
     pointer-events: none;
+    user-select: none;
 }
 
 .upload-icon {
diff --git a/docs/index.html b/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=2">
+    <link rel="stylesheet" href="assets/style.css?v=3">
     <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>
@@ -47,10 +47,6 @@ <h2>Upload Your Documents</h2>
                     </div>
 
                     <div class="upload-options">
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="dryRunCheck" checked>
-                            <span>Preview mode (dry-run)</span>
-                        </label>
                         <button class="btn btn-secondary" id="clearBtn" style="display: none;">Clear All</button>
                     </div>
 
@@ -184,6 +180,6 @@ <h2>Prefer Command Line?</h2>
         </div>
     </footer>
 
-    <script src="assets/app.js?v=2"></script>
+    <script src="assets/app.js?v=3"></script>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -171,6 +171,7 @@ body {`
`171`	`171`
`172`	`172`	`.upload-content {`
`173`	`173`	`pointer-events: none;`
	`174`	`+ user-select: none;`
`174`	`175`	`}`
`175`	`176`
`176`	`177`	`.upload-icon {`