Fix file upload reset issue - complete solution

✅ File Input Reset Fix:
- Completely recreate file input element on reset to clear all state
- Remove and recreate DOM elements to eliminate cached event listeners
- Add comprehensive logging for debugging file selection issues
- Force clear file input value and recreate with fresh event handlers

✅ Event Listener Management:
- Clone and replace upload area to remove stale event listeners
- Reinitialize all drag & drop and click event handlers
- Ensure file input click events work after multiple uploads
- Add proper event propagation handling

✅ Upload Area Reinitialization:
- Create initializeUploadArea() function for complete reset
- Remove existing file input and create brand new element
- Reattach all event listeners to fresh DOM elements
- Add console logging for debugging upload flow

✅ Robust State Management:
- Clear uploadedFile variable on reset
- Hide upload controls and results sections
- Remove 'Upload Another' buttons properly
- Ensure clean state between file uploads

This should completely resolve the file upload reset issue where users had to reload the page to upload a second file.

static/script.js

@@ -27,8 +27,12 @@ function setupEventListeners() {
     // Click to upload (only on the upload area, not buttons inside it)
     uploadArea.addEventListener('click', function(event) {
         // Only trigger file input if clicking on the upload area itself, not buttons
-        if (event.target === uploadArea || event.target.closest('.upload-content') && !event.target.closest('button')) {
-            document.getElementById('fileInput').click();
+        if (event.target === uploadArea || (event.target.closest('.upload-content') && !event.target.closest('button'))) {
+            console.log('Upload area clicked, triggering file input');
+            const fileInput = document.getElementById('fileInput');
+            if (fileInput) {
+                fileInput.click();
+            }
         }
     });
 }
@@ -90,12 +94,63 @@ function displayApiInfo(data) {
 function showUploadSection() {
     document.getElementById('uploadSection').style.display = 'block';
     document.getElementById('uploadSection').scrollIntoView({ behavior: 'smooth' });
+
+    // Ensure the upload area is properly initialized
+    initializeUploadArea();
+}
+
+function initializeUploadArea() {
+    const uploadArea = document.getElementById('uploadArea');
+    let fileInput = document.getElementById('fileInput');
+
+    // Completely recreate the file input element
+    if (fileInput) {
+        fileInput.remove();
+    }
+
+    // Create a brand new file input
+    const newFileInput = document.createElement('input');
+    newFileInput.type = 'file';
+    newFileInput.id = 'fileInput';
+    newFileInput.accept = 'image/*';
+    newFileInput.style.display = 'none';
+    newFileInput.multiple = false;
+
+    // Insert the new file input into the DOM
+    uploadArea.parentNode.insertBefore(newFileInput, uploadArea);
+
+    // Clear any existing event listeners on upload area by cloning
+    const newUploadArea = uploadArea.cloneNode(true);
+    uploadArea.parentNode.replaceChild(newUploadArea, uploadArea);
+
+    // Re-attach all event listeners to the new elements
+    newFileInput.addEventListener('change', handleFileSelect);
+
+    newUploadArea.addEventListener('dragover', handleDragOver);
+    newUploadArea.addEventListener('dragleave', handleDragLeave);
+    newUploadArea.addEventListener('drop', handleDrop);
+
+    newUploadArea.addEventListener('click', function(event) {
+        if (event.target === newUploadArea || (event.target.closest('.upload-content') && !event.target.closest('button'))) {
+            console.log('Upload area clicked, triggering file input');
+            const currentFileInput = document.getElementById('fileInput');
+            if (currentFileInput) {
+                currentFileInput.click();
+            }
+        }
+    });
+
+    console.log('Upload area completely reinitialized with fresh file input');
 }
 
 function handleFileSelect(event) {
+    console.log('File select event triggered');
     const file = event.target.files[0];
     if (file) {
+        console.log('File selected:', file.name);
         handleFile(file);
+    } else {
+        console.log('No file selected');
     }
 }
 
@@ -150,11 +205,7 @@ function handleFile(file) {
 function resetFileUpload() {
     uploadedFile = null;
 
-    // Reset file input
-    const fileInput = document.getElementById('fileInput');
-    fileInput.value = '';
-
-    // Reset upload area
+    // Reset upload area HTML
     const uploadArea = document.getElementById('uploadArea');
     uploadArea.innerHTML = `
         <div class="upload-content">
@@ -168,10 +219,22 @@ function resetFileUpload() {
     `;
 
     // Hide controls
-    document.getElementById('uploadControls').style.display = 'none';
+    const uploadControls = document.getElementById('uploadControls');
+    uploadControls.style.display = 'none';
+
+    // Remove the "Upload Another" button if it exists
+    const uploadAnotherBtn = uploadControls.querySelector('.upload-another');
+    if (uploadAnotherBtn) {
+        uploadAnotherBtn.remove();
+    }
 
     // Hide results if showing
     document.getElementById('resultsSection').style.display = 'none';
+
+    // Reinitialize the upload area with fresh event listeners
+    initializeUploadArea();
+
+    console.log('File upload reset completed');
 }
 
 async function processUploadedImage() {

templates/index.html

@@ -50,7 +50,7 @@
                         <i class="fas fa-cloud-upload-alt upload-icon"></i>
                         <p>Drag and drop an image here or click to select</p>
                         <p class="upload-hint">Supported formats: PNG, JPG, JPEG, GIF, BMP</p>
-                        <input type="file" id="fileInput" accept="image/*" style="display: none;">
+                        <input type="file" id="fileInput" accept="image/*" style="display: none;" multiple="false">
                         <button class="btn btn-outline" onclick="document.getElementById('fileInput').click()">
                             Select Image
                         </button>