From 55af293bb735195e49d6f04f5af7f7d13e65891b Mon Sep 17 00:00:00 2001 From: Aherobo Ovie Victor Date: Fri, 11 Jul 2025 21:21:24 +0100 Subject: [PATCH] Fix file upload reset issue - complete solution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ 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 | 79 +++++++++++++++++++++++++++++++++++++++----- templates/index.html | 2 +- 2 files changed, 72 insertions(+), 9 deletions(-) diff --git a/static/script.js b/static/script.js index 4395bf5..c2ee618 100644 --- a/static/script.js +++ b/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 = `
@@ -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() { diff --git a/templates/index.html b/templates/index.html index a00ddce..b8ed60d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -50,7 +50,7 @@

Drag and drop an image here or click to select

Supported formats: PNG, JPG, JPEG, GIF, BMP

- +