From ead583b3bf1396f4899f517df36adc558d08d60e Mon Sep 17 00:00:00 2001
From: "jose.gonzalez@pandorafms.com" <jose.gonzalez@pandorafms.com>
Date: Fri, 4 Nov 2022 08:43:18 +0100
Subject: [PATCH] Input type file changed

---
 pandora_console/include/functions_html.php | 18 ++++++++++++++++--
 pandora_console/include/styles/pandora.css | 18 ++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php
index 0243a62a0b..f6cd8c5ef1 100644
--- a/pandora_console/include/functions_html.php
+++ b/pandora_console/include/functions_html.php
@@ -4481,7 +4481,8 @@ function html_print_header_logo_image(bool $menuCollapsed, bool $return=false)
 function html_print_input_file($name, $return=false, $options=false)
 {
     $output = '';
-
+    // Start to build the input.
+    $output .= '<label class="inputFile">';
     $output .= '<input type="file" value="" name="'.$name.'" id="file-'.$name.'" ';
 
     if ($options) {
@@ -4510,7 +4511,20 @@ function html_print_input_file($name, $return=false, $options=false)
         }
     }
 
-    $output .= ' />';
+    // Close input.
+    $output .= '/>';
+    $output .= ($options['caption'] ?? __('Select a file'));
+    $output .= '</label>';
+    $output .= '<span class="inputFileSpan" id="span-'.$name.'">&nbsp;</span>';
+    // Add script.
+    $output .= '<script>';
+    $output .= 'let inputElement = document.getElementById("file-'.$name.'");
+                let inputFilename = document.getElementById("span-'.$name.'");
+                inputElement.addEventListener("change", ()=>{
+                    let inputImage = document.querySelector("input[type=file]").files[0];
+                inputFilename.innerText = inputImage.name;
+                });';
+    $output .= '</script>';
 
     if ($return) {
         return $output;
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 62b7b6be2d..e311c3108c 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -8960,6 +8960,24 @@ div#err_msg_centralised {
   }
 }
 
+.inputFile {
+  background-color: #f6f7fb;
+  height: 28px;
+  border: 1px solid #c0ccdc;
+  border-radius: 8px;
+  font: normal normal normal 12px Pandora-Light;
+  color: #2b3332;
+  padding: 5.5pt 20pt;
+  cursor: pointer;
+}
+
+.inputFile>input[type=file] {
+  display: none;
+}
+
+.inputFileSpan {
+  color: color: #2b3332;
+}
 input,
 textarea,
 select {