Click anywhere to trigger file selection

keventmesh · Oct 3, 2023 · 92b12a4 · 92b12a4
1 parent 76e20b0
commit 92b12a4
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/services/ui-service/templates/index.html b/services/ui-service/templates/index.html
@@ -201,6 +201,9 @@
 </head>
 <body>
 
+<!-- invisible file input-->
+<input type="file" id="imageSelectInput" name="image" accept="image/*" capture="environment">
+
 <div id="container">
     <div id="homeView">
         <div></div>
@@ -216,7 +219,6 @@
             <div class="buttons">
                 <div class="imageSelectButton" class="btn btn-outline-light btn-lg">
                     <img class="touchImg" src="static/touch_button.svg"/>
-                    <input type="file" id="imageSelectInput" name="image" accept="image/*">
                 </div>
             </div>
             <div class="bottomTitle">
@@ -407,6 +409,13 @@ <h1 class="modal-title fs-5 text-danger" id="errorModalLabel">Error</h1>
                 console.log("Disconnected from reply service!");
             });
 
+            $("#homeView").on("click", function (e) {
+                console.log("Opening file selection");
+                $('#imageSelectInput').focus().trigger('click');
+                e.preventDefault();
+                return false;
+            });
+
             function callUpload() {
                 $.ajax({
                     url: UPLOAD_SERVICE_URL,