From f02c7e23f3e50f19956d107268f8c2c1af2df9cf Mon Sep 17 00:00:00 2001
From: Damian Schneider <daedae@gmx.ch>
Date: Wed, 31 Dec 2025 16:33:31 +0100
Subject: [PATCH 1/2] add json validation to file uplod in UI and minify before
 upload. use sequential loading in edit.htm

---
 wled00/data/common.js | 20 +++++++++++++++-----
 wled00/data/edit.htm  | 44 ++++++++++++++++++++++---------------------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/wled00/data/common.js b/wled00/data/common.js
index 5f73c946d8..863584a67f 100644
--- a/wled00/data/common.js
+++ b/wled00/data/common.js
@@ -137,16 +137,26 @@ function showToast(text, error = false) {
 	x.style.animation = 'none';
 	timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
 }
-function uploadFile(fileObj, name) {
+async function uploadFile(fileObj, name, callback) {
+	let file = fileObj.files?.[0]; // get first file, "?"" = optional chaining in case no file is selected
+  if (!file) { callback?.(false); return; }
+	if (/\.json$/i.test(name)) { // same as name.toLowerCase().endsWith('.json')
+    try {
+      const minified = JSON.stringify(JSON.parse(await file.text())); // validate and minify JSON
+      file = new Blob([minified], { type: file.type || "application/json" });
+    } catch (err) {
+      if (!confirm("JSON invalid. Continue?")) { callback?.(false); return; }
+      // proceed with original file if invalid but user confirms
+    }
+  }
 	var req = new XMLHttpRequest();
-	req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400)});
-	req.addEventListener('error', function(e){showToast(e.stack,true);});
+	req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400); if(callback) callback(this.status < 400);});
+	req.addEventListener('error', function(e){showToast(e.stack,true); if(callback) callback(false);});
 	req.open("POST", "/upload");
 	var formData = new FormData();
-	formData.append("data", fileObj.files[0], name);
+	formData.append("data", file, name);
 	req.send(formData);
 	fileObj.value = '';
-	return false;
 }
 // connect to WebSocket, use parent WS or open new, callback function gets passed the new WS object
 function connectWs(onOpen) {
diff --git a/wled00/data/edit.htm b/wled00/data/edit.htm
index d295639f55..3eddbe2f7b 100644
--- a/wled00/data/edit.htm
+++ b/wled00/data/edit.htm
@@ -5,12 +5,10 @@
 <meta name="author" content="DedeHai, based on editor by Me-No-Dev">
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"><!-- prevent too much scaling on mobile -->
 <link rel="shortcut icon" href="favicon.ico">
-<link href="style.css" rel="stylesheet">
 <!-- Optional lightweight JSON editor - fallback to textarea if CDN is unavailable -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/ace.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/mode-json.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/theme-monokai.min.js"></script>
-<script src="common.js"></script>
 <style>
 /* Editor-specific styles */
 body {
@@ -113,6 +111,15 @@
 @keyframes spin { to { transform: rotate(360deg); } }
 </style>
 <script>
+// load common.js with retry on error
+(function loadFiles() {
+	const l = document.createElement('script');
+	l.src = 'common.js';
+	l.onload = () => loadResources(['style.css'], S); // load style.css then call S()
+	l.onerror = () => setTimeout(loadFiles, 100);
+	document.head.appendChild(l);
+})();
+
 var QueuedRequester = function(){ this.q=[]; this.r=false; this.x=null; }
 QueuedRequester.prototype = {
 	_request: function(req){
@@ -411,7 +418,7 @@
 		// Check filename from text field or current file
 		var pathField = gId("filepath");
 		var filename = (pathField && pathField.value) ? pathField.value : currentFile;
-		aceEditor.session.setMode(filename && filename.toLowerCase().endsWith('.json') ? "ace/mode/json" : "ace/mode/text");
+		aceEditor.session.setMode(filename && (/\.json$/i.test(filename)) ? "ace/mode/json" : "ace/mode/text"); // same as filename.toLowerCase().endsWith('.json')
 	}
 
 	// Try to initialize Ace editor if available
@@ -467,7 +474,7 @@
 		var filename = pathField ? pathField.value : currentFile;
 		var border = "2px solid #333";
 
-		if (filename && filename.toLowerCase().endsWith('.json')) {
+		if (filename && (/\.json$/i.test(filename))) { // same as filename.toLowerCase().endsWith('.json')
 			try {
 				JSON.parse(ta.value);
 			} catch(e) {
@@ -478,23 +485,19 @@
 	};
 
 	function saveFile(filename,data){
-		var finalData = data;
-		// Minify JSON files before upload
-		if (filename.toLowerCase().endsWith('.json')) {
+		var outdata = data;
+		if (/\.json$/i.test(filename)) { // same as filename.toLowerCase().endsWith('.json')
 			try {
-				finalData = JSON.stringify(JSON.parse(data));
+				outdata = JSON.stringify(JSON.parse(data)); // validate and minify
 			} catch(e) {
-				alert("Invalid JSON! Please fix syntax.");
+				alert("Invalid JSON! Please fix.");
 				return;
 			}
 		}
-		var fd=new FormData();
-		fd.append("file",new Blob([finalData],{type:"text/plain"}),filename);
-		req.add("POST","/upload",fd,function(st,resp){
-			if (st!=200) alert("ERROR "+st+": "+resp);
-			else {
-				showToast("File saved");
+		uploadFile({files: [new Blob([outdata], {type:"text/plain"})]}, filename, function(s) {
+			if(s) {
 				refreshTree();
+				loadFile(filename); // (re)load if saved successfully to update formating or show file content
 			}
 		});
 	}
@@ -505,9 +508,9 @@
 			gId("preview").style.display="none";
 			gId("editor").style.display="flex";
 			if (st==200) {
-				if (filename.toLowerCase().endsWith('.json')) {
+				if ((/\.json$/i.test(filename))) { // same as filename.toLowerCase().endsWith('.json')
 					try {
-						setContent(filename.toLowerCase().includes('ledmap') ? prettyLedmap(resp) : JSON.stringify(JSON.parse(resp), null, 2));
+						setContent(/ledmap/i.test(filename) ? prettyLedmap(resp) : JSON.stringify(JSON.parse(resp), null, 2)); // pretty-print ledmap files (i.e. if file name includes "ledmap" case-insensitive)
 					} catch(e) {
 						setContent(resp);
 					}
@@ -534,8 +537,7 @@
 			}
 			if (!fn.startsWith("/")) fn = "/" + fn;
 			currentFile = fn; // Update current file
-			saveFile(fn, getContent());
-			loadFile(fn);
+			saveFile(fn, getContent()) 
 		},
 		loadText:function(fn){
 			currentFile=fn;
@@ -558,7 +560,7 @@
 	};
 }
 
-function onBodyLoad(){
+function S(){
 	var vars={};
 	window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m,k,v){
 		vars[decodeURIComponent(k)]=decodeURIComponent(v);
@@ -577,7 +579,7 @@
 }
 </script>
 </head>
-<body onload="onBodyLoad()">
+<body>
 	<div id="toast"></div>
 	<div id="loader"><div class="loader"></div></div>
 	<div id="top"></div>

From a28b721037c1d403d8a1e4669b710a1ba91ad404 Mon Sep 17 00:00:00 2001
From: Damian Schneider <daedae@gmx.ch>
Date: Wed, 31 Dec 2025 16:47:22 +0100
Subject: [PATCH 2/2] follow the rabbit.

---
 wled00/data/common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/wled00/data/common.js b/wled00/data/common.js
index 863584a67f..a6223daa7c 100644
--- a/wled00/data/common.js
+++ b/wled00/data/common.js
@@ -151,7 +151,7 @@ async function uploadFile(fileObj, name, callback) {
   }
 	var req = new XMLHttpRequest();
 	req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400); if(callback) callback(this.status < 400);});
-	req.addEventListener('error', function(e){showToast(e.stack,true); if(callback) callback(false);});
+	req.addEventListener('error', function(e){showToast("Upload failed",true); if(callback) callback(false);});
 	req.open("POST", "/upload");
 	var formData = new FormData();
 	formData.append("data", file, name);