Add own background image upload (#3596)

* Add own bg image upload

* Fix undefined issue in settings UI

wled00/data/settings_ui.htm

@@ -118,12 +118,13 @@
 	function genForm(s) {
 		var str = "";
 		str = addRec(s,"",l);
+		oldUrl = "";
 		
 		gId('gen').innerHTML = str;
 		if (gId('theme_bg_rnd').checked) {
-			oldUrl = "";
 			toggle("Image");
-			randomBg();
+		} else if (gId('theme_bg_url').value.startsWith('data:')) {
+			gId("bg_url").classList.add("hide");
 		} else oldUrl = gId("theme_bg_url").value;
 	}
 	function GetLS()
@@ -239,9 +240,31 @@
 			url = "https://picsum.photos/1920/1080";
 			if (gId(`${t}Grayscale`).checked) url += "?grayscale";
 			if (gId(`${t}Blur`).checked) url += (url.includes("?") ? "&" : "?") + "blur";
+			gId("theme_bg_img").value = "";
+			gId("bg_url").classList.remove("hide");
 		}
 		gId("theme_bg_url").value = url;
 	}
+	// own BG image
+	function ownBg(element) {
+		const file = element.files[0];
+		const reader = new FileReader();
+		reader.onload = () => {
+			gId("theme_bg_url").value = reader.result;
+			gId("bg_url").classList.add("hide");
+			if (gId("theme_bg_rnd").checked) toggle("Image");
+			gId("theme_bg_rnd").checked = false;
+		}
+		reader.readAsDataURL(file);
+	}
+	function removeBgImg() {
+		gId("theme_bg_url").value = "";
+		gId("theme_bg_img").value = "";
+		gId("bg_url").classList.remove("hide");
+		if (gId("theme_bg_rnd").checked) toggle("Image");
+		gId("theme_bg_rnd").checked = false;
+	}
+
 	function uploadFile(fO,name) {
 		var req = new XMLHttpRequest();
 		req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400)});
@@ -290,9 +313,12 @@
 		<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>
 		<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_bg" class="agi"><br>
 		<span class="l"></span>: <input type="text" id="theme_color_bg" maxlength="9" class="agi"><br>
+		BG image: <input type="file" id="theme_bg_img" accept="image/*" onchange="ownBg(this)"> <input type="button" value="Remove" onclick="removeBgImg()"><br>
 		<span class="l"></span>: <input type="checkbox" id="theme_bg_rnd" class="agi cb" onchange="randomBg();toggle('Image');">
 		<div id="Image">
-			<span class="l"></span>: <input type="text" id="theme_bg_url" class="agi"><br>
+			<div id="bg_url">
+				<span class="l"></span>: <input type="text" id="theme_bg_url" class="agi"><br>
+			</div>
 		</div>
 		<div id="NoImage" class="hide">
 			<h4>Random BG image settings</h4>