Html-only background upload input

victrme · Jan 5, 2025 · f000751 · f000751
1 parent 8587c99
commit f000751
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts
@@ -406,11 +406,7 @@ function initOptionsEvents() {
 
 	// Custom backgrounds
 
-	paramId('b_background-upload').onclickdown(function (this: HTMLInputElement) {
-		paramId('background-upload')?.click()
-	})
-
-	paramId('background-upload').addEventListener('change', function (this: HTMLInputElement) {
+	paramId('i_background-upload').addEventListener('change', function (this: HTMLInputElement) {
 		localBackgrounds({ newfile: this.files })
 	})
 

diff --git a/src/settings.html b/src/settings.html
@@ -185,8 +185,10 @@ <h2 class="trn">Background</h2>
 
 		<div class="wrapper">
 			<span class="trn">Add backgrounds</span>
-			<button id="b_background-upload" class="param-btn trn">Select files</button>
-			<input id="background-upload" type="file" name="background_file" multiple accept="image/*" />
+			<label id="lbl_background-upload">
+				<span class="param-btn trn">Select files</span>
+				<input id="i_background-upload" type="file" name="background_file" multiple accept="image/*" />
+			</label>
 		</div>
 
 		<div id="thumbnails-container"></div>

diff --git a/src/styles/_settings.css b/src/styles/_settings.css
@@ -797,7 +797,20 @@ aside .settings-title .tooltip {
 	padding: 0 4px;
 }
 
-#background-upload {
+#lbl_background-upload {
+	pointer-events: all;
+}
+
+#lbl_background-upload span {
+	display: block;
+	padding: 0 1em;
+	height: 31px;
+	font-size: 13px;
+	line-height: 31px;
+	cursor: pointer;
+}
+
+#i_background-upload {
 	display: none;
 }