From a85de793d73b6951ccc0cf48750b4eb89982320e Mon Sep 17 00:00:00 2001
From: AJ <ajisaacs27@gmail.com>
Date: Sun, 16 Nov 2025 12:07:17 -0500
Subject: [PATCH] Feature: disable preview button until CSV file is selected

Added validation to prevent users from submitting the upload form without
selecting a file first. The preview button is now disabled by default and
only enables when a file is selected, improving user experience and
preventing empty form submissions.

Changes:
- Added IDs to file input and preview button
- Button starts in disabled state
- JavaScript listener enables button when file is selected
- Button disables again if file selection is cleared
---
 MoneyMap/Pages/Upload.cshtml  |  6 +++---
 MoneyMap/wwwroot/js/upload.js | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/MoneyMap/Pages/Upload.cshtml b/MoneyMap/Pages/Upload.cshtml
index aea6bed..64c9199 100644
--- a/MoneyMap/Pages/Upload.cshtml
+++ b/MoneyMap/Pages/Upload.cshtml
@@ -165,9 +165,9 @@ else
 
     <div>
         <label class="form-label">CSV file</label>
-        <input asp-for="Csv" type="file" class="form-control" accept=".csv" />
+        <input asp-for="Csv" type="file" class="form-control" accept=".csv" id="csvFileInput" />
         <span asp-validation-for="Csv" class="text-danger"></span>
-        
+
     </div>
 
     <fieldset class="border rounded p-3">
@@ -228,7 +228,7 @@ else
         </div>
     </fieldset>
 
-    <button type="submit" class="btn btn-primary">Preview Transactions</button>
+    <button type="submit" class="btn btn-primary" id="previewButton" disabled>Preview Transactions</button>
     <div asp-validation-summary="All" class="text-danger"></div>
 </form>
 }
diff --git a/MoneyMap/wwwroot/js/upload.js b/MoneyMap/wwwroot/js/upload.js
index 8604fa1..8c8572d 100644
--- a/MoneyMap/wwwroot/js/upload.js
+++ b/MoneyMap/wwwroot/js/upload.js
@@ -113,4 +113,14 @@ document.addEventListener('DOMContentLoaded', function() {
     if (totalRows > pageSize) {
         showPage(0);
     }
+
+    // Enable/disable preview button based on file selection
+    const csvFileInput = document.getElementById('csvFileInput');
+    const previewButton = document.getElementById('previewButton');
+
+    if (csvFileInput && previewButton) {
+        csvFileInput.addEventListener('change', function() {
+            previewButton.disabled = !this.files || this.files.length === 0;
+        });
+    }
 });