🔧 Improve file dialog opening: use overlay input approach

- Use absolutely positioned transparent file input over upload area
- Remove label wrapper approach
- Input covers entire upload area with opacity 0
- Better browser compatibility for opening file dialog
- Save app instance to window for testing
- Update cache-busting to v=5

Author: kiku-jw

docs/assets/app.js

@@ -183,31 +183,16 @@ class App {
     }
 
     setupEventListeners() {
-        // Click to upload - use label approach for better browser compatibility
-        // The label wraps the file input, so clicking anywhere on upload area triggers it
-        const fileInputLabel = this.uploadArea.querySelector('.file-input-label');
-        if (fileInputLabel) {
-            // Make label cover entire upload area
-            fileInputLabel.style.position = 'absolute';
-            fileInputLabel.style.top = '0';
-            fileInputLabel.style.left = '0';
-            fileInputLabel.style.width = '100%';
-            fileInputLabel.style.height = '100%';
-            fileInputLabel.style.cursor = 'pointer';
-            fileInputLabel.style.zIndex = '1';
-            // Ensure label is clickable
-            fileInputLabel.style.pointerEvents = 'auto';
-        }
-        
-        // Direct click handler on upload area as primary method
+        // File input is positioned absolutely over upload area, so clicking anywhere opens it
+        // Also handle direct clicks on upload area as fallback
         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 directly
-            if (this.fileInput && e.target !== this.fileInput) {
-                // Small delay to ensure event propagation
+            // If click is not on file input itself, trigger it
+            if (this.fileInput && e.target !== this.fileInput && !e.target.closest('input[type="file"]')) {
+                // Use setTimeout for better compatibility
                 setTimeout(() => {
                     try {
                         this.fileInput.click();
@@ -223,7 +208,8 @@ class App {
             if (e.target.closest('.remove-file') || e.target.closest('.btn')) {
                 return;
             }
-            if (this.fileInput && e.target !== this.fileInput) {
+            if (this.fileInput && e.target !== this.fileInput && !e.target.closest('input[type="file"]')) {
+                // Prevent default to avoid conflicts
                 e.preventDefault();
                 setTimeout(() => {
                     try {
@@ -575,7 +561,7 @@ async function init() {
         // Load JSZip and initialize app
         await loadJSZip();
         window.JSZip = JSZip;
-        new App();
+        window.app = new App(); // Save app instance for testing
     } catch (error) {
         console.error('Failed to initialize:', error);
         const errorDiv = document.createElement('div');

docs/assets/style.css

@@ -177,15 +177,16 @@ body {
     z-index: 2;
 }
 
-.file-input-label {
-    display: block;
-    width: 100%;
-    height: 100%;
+.file-input-hidden {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
     cursor: pointer;
-    z-index: 1;
+    z-index: 10;
+    font-size: 0;
 }
 
 .upload-icon {

docs/index.html

@@ -43,9 +43,7 @@ <h2>Upload Your Documents</h2>
                             </p>
                             <p class="upload-hint">Supports: .txt, .docx files</p>
                         </div>
-                        <label for="fileInput" class="file-input-label">
-                            <input type="file" id="fileInput" multiple accept=".txt,.docx" style="position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden;">
-                        </label>
+                        <input type="file" id="fileInput" multiple accept=".txt,.docx" class="file-input-hidden">
                     </div>
 
                     <div id="fileList" class="file-list"></div>