From 3068b16a72adca5bb148466eccce7c5b1f397740 Mon Sep 17 00:00:00 2001
From: w <waifuism@tutanota.com>
Date: Thu, 17 Jul 2025 23:24:06 -0300
Subject: [PATCH] Sanitize file names for card image and JSON downloads to
 prevent invalid characters

---
 web/templates/card_creator.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/templates/card_creator.html b/web/templates/card_creator.html
index 2af5e99..2a39616 100644
--- a/web/templates/card_creator.html
+++ b/web/templates/card_creator.html
@@ -221,13 +221,17 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
 
 // Download button
 downloadBtn.addEventListener("click", () => {
+  // Sanitize file name
+  const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
+  const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
+  const fileName = `kemoverse_${safePack}_${safeName}.webp`;
+
   const link = document.createElement("a");
-  link.download = "kemoverse-card.webp";
+  link.download = fileName;
   link.href = canvas.toDataURL("image/webp", 0.95);
   link.click();
 });
 
-// Create and place the JSON download button below the card download button
 const jsonBtn = document.createElement("button");
 jsonBtn.textContent = "Download Card Info";
 jsonBtn.style.marginTop = "0.5rem";
@@ -242,12 +246,17 @@ jsonBtn.onclick = () => {
     artist: artistInput.value,
     frame: frameSelect.value
   };
+  const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
+  const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
+  const fileName = `kemoverse_${safePack}_${safeName}.json`;
+
   const blob = new Blob([JSON.stringify(cardData, null, 2)], {type: "application/json"});
   const link = document.createElement("a");
   link.href = URL.createObjectURL(blob);
-  link.download = "kemoverse-card.json";
+  link.download = fileName;
   link.click();
 };
+
 // Place the button below the downloadBtn
 downloadBtn.parentNode.insertBefore(jsonBtn, downloadBtn.nextSibling);
 </script>