Disable upload and import buttons when no file is selected

src/web/html/colorBright.css

@@ -12,6 +12,7 @@
 
     --nav-bg: #333;
     --primary: #006ec0;
+    --primary-disabled: #ccc;
     --primary-hover: #044e86;
     --secondary: #0072c8;
     --nav-active: #555;

src/web/html/colorDark.css

@@ -12,6 +12,7 @@
 
     --nav-bg: #333;
     --primary: #004d87;
+    --primary-disabled: #ccc;
     --primary-hover: #023155;
     --secondary: #0072c8;
     --nav-active: #555;

src/web/html/setup.html

@@ -321,8 +321,8 @@
                             <div class="col-12 col-sm-9">
                                 <form id="form" method="POST" action="/upload" enctype="multipart/form-data" accept-charset="utf-8">
                                     <div class="row">
-                                        <div class="col-12 col-sm-8 my-2"><input type="file" name="upload"></div>
+                                        <div class="col-12 col-sm-8 my-2"><input type="file" id="importFileInput" name="upload"></div>
-                                        <div class="col-12 col-sm-4 my-2"><input type="button" class="btn" value="Import" onclick="hide()"></div>
+                                        <div class="col-12 col-sm-4 my-2"><input type="button" id="importButton" class="btn" value="Import" onclick="hide()"></div>
                                     </div>
                                 </form>
                             </div>
@@ -612,6 +612,26 @@
                 var obj = {cmd: "discovery_cfg", token: "*"}
                 getAjax("/api/setup", apiCbMqtt, "POST", JSON.stringify(obj));
             }
+            // Wait for the DOM to be fully loaded
+            document.addEventListener('DOMContentLoaded', () => {
+                // Get references to the file input and button elements
+                const fileInput = document.querySelector('#importFileInput');
+                const button = document.querySelector('#importButton');
+                // Initially disable the button
+                button.disabled = true;
+                button.title = "Please select a file first";
+                // Listen for changes on the file input
+                fileInput.addEventListener('change', () => {
+                    // Enable or disable the button based on whether a file is selected
+                    if (fileInput.value) {
+                        button.disabled = false;
+                        button.title = ""; // Clear the tooltip when a file is selected
+                    } else {
+                        button.disabled = true;
+                        button.title = "Please select a file first"; // Show the tooltip when no file is selected
+                    }
+                });
+            });
 
             function hide() {
                 document.getElementById("form").submit();

src/web/html/style.css

@@ -563,7 +563,13 @@ input.btn {
     cursor: pointer;
 }
 
-input.btn:hover {
+input.btn:disabled {
+    background-color: var(--primary-disabled);
+    color: #888;
+    cursor: not-allowed;
+}
+
+input.btn:not(:disabled):hover {
     background-color: #044e86;
 }
 

src/web/html/update.html

@@ -12,8 +12,8 @@
                     <legend class="des">{#SELECT_FILE} (*.bin)</legend>
                     <p>{#INSTALLED_VERSION}:<br/><span id="version" style="background-color: var(--input-bg); padding: 7px; display: block; margin: 3px;"></span></p>
                     <form id="form" method="POST" action="/update" enctype="multipart/form-data" accept-charset="utf-8">
-                        <input type="file" name="update">
+                        <input type="file" id="uploadFileInput" name="update">
-                        <input type="button" class="btn my-4" value="{#BTN_UPDATE}" onclick="hide()">
+                        <input type="button" id="uploadButton" class="btn my-4" value="{#BTN_UPDATE}" onclick="hide()">
                     </form>
                 </fieldset>
                 <div class="row mt-4">
@@ -23,6 +23,27 @@
         </div>
         {#HTML_FOOTER}
         <script type="text/javascript">
+            // Wait for the DOM to be fully loaded
+            document.addEventListener('DOMContentLoaded', () => {
+                // Get references to the file input and button elements
+                const fileInput = document.querySelector('#uploadFileInput');
+                const button = document.querySelector('#uploadButton');
+                // Initially disable the button
+                button.disabled = true;
+                button.title = "Please select a file first"; // Show the tooltip when no file is selected
+                // Listen for changes on the file input
+                fileInput.addEventListener('change', () => {
+                    // Enable or disable the button based on whether a file is selected
+                    if (fileInput.value) {
+                        button.disabled = false;
+                        button.title = ""; // Clear the tooltip when a file is selected
+                    } else {
+                        button.disabled = true;
+                        button.title = "Please select a file first"; // Show the tooltip when no file is selected
+                    }
+                });
+            });
+
             var env;
             function parseGeneric(obj) {
                 parseNav(obj)