From a633d7772d8fbd3914b1e3f11c36b9651c89dfa1 Mon Sep 17 00:00:00 2001
From: Nabil Adem <nabiladam7@gmail.com>
Date: Wed, 11 Feb 2026 21:22:59 -0700
Subject: [PATCH 1/3] fix: sanitize image filenames in FormData to prevent
 pattern match error

---
 web/src/components/UploadForm.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/UploadForm.jsx b/web/src/components/UploadForm.jsx
index 7316c2c..a6b456e 100644
--- a/web/src/components/UploadForm.jsx
+++ b/web/src/components/UploadForm.jsx
@@ -224,7 +224,10 @@ export default function UploadForm({ file, onFileChange }) {
 
     // prepare form data to send to the backend
     const fd = new FormData()
-    fd.append('avatar', file, file.name)
+    // sanitize filename to prevent "The string did not match the expected pattern" error
+    // remove control characters, newlines, and other invalid characters
+    const sanitizedFilename = file.name.replace(/[\x00-\x1F\x7F]/g, '')
+    fd.append('avatar', file, sanitizedFilename || 'image')
     fd.append('maxsize', String(maxSize))
     fd.append('format', format)
     fd.append('quality', String(quality))
@@ -318,10 +321,9 @@ export default function UploadForm({ file, onFileChange }) {
         </label>
         <div
           className={`relative group border-2 border-dashed rounded-2xl transition-all duration-500 ease-out
-            ${
-              isDragging
-                ? 'border-[var(--glass-border)] bg-[var(--glass-bg)] backdrop-blur-xl scale-[1.02] shadow-[var(--shadow-color)]'
-                : 'border-[var(--glass-border)] hover:border-[var(--glass-highlight)] bg-[var(--glass-bg)] backdrop-blur-md hover:bg-[var(--glass-highlight)] shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]'
+            ${isDragging
+              ? 'border-[var(--glass-border)] bg-[var(--glass-bg)] backdrop-blur-xl scale-[1.02] shadow-[var(--shadow-color)]'
+              : 'border-[var(--glass-border)] hover:border-[var(--glass-highlight)] bg-[var(--glass-bg)] backdrop-blur-md hover:bg-[var(--glass-highlight)] shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]'
             }
             ${preview ? 'p-0 overflow-hidden border-[var(--glass-border)]' : 'p-10'}
           `}

From 2582d131bf75720701a1670e8a0908926ecc25b9 Mon Sep 17 00:00:00 2001
From: Nabil Adem <nabiladam7@gmail.com>
Date: Wed, 11 Feb 2026 21:27:56 -0700
Subject: [PATCH 2/3] fix: suppress ESLint no-control-regex warning for
 filename sanitization

---
 web/src/components/UploadForm.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/UploadForm.jsx b/web/src/components/UploadForm.jsx
index a6b456e..61d007b 100644
--- a/web/src/components/UploadForm.jsx
+++ b/web/src/components/UploadForm.jsx
@@ -226,6 +226,7 @@ export default function UploadForm({ file, onFileChange }) {
     const fd = new FormData()
     // sanitize filename to prevent "The string did not match the expected pattern" error
     // remove control characters, newlines, and other invalid characters
+    // eslint-disable-next-line no-control-regex
     const sanitizedFilename = file.name.replace(/[\x00-\x1F\x7F]/g, '')
     fd.append('avatar', file, sanitizedFilename || 'image')
     fd.append('maxsize', String(maxSize))

From c13fa6a75c78c09ad3317bbd83d02371161be6e3 Mon Sep 17 00:00:00 2001
From: Nabil Adem <nabiladam7@gmail.com>
Date: Wed, 11 Feb 2026 21:32:57 -0700
Subject: [PATCH 3/3] Fix prettier errors

---
 web/src/components/UploadForm.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/UploadForm.jsx b/web/src/components/UploadForm.jsx
index 61d007b..2598b43 100644
--- a/web/src/components/UploadForm.jsx
+++ b/web/src/components/UploadForm.jsx
@@ -322,9 +322,10 @@ export default function UploadForm({ file, onFileChange }) {
         </label>
         <div
           className={`relative group border-2 border-dashed rounded-2xl transition-all duration-500 ease-out
-            ${isDragging
-              ? 'border-[var(--glass-border)] bg-[var(--glass-bg)] backdrop-blur-xl scale-[1.02] shadow-[var(--shadow-color)]'
-              : 'border-[var(--glass-border)] hover:border-[var(--glass-highlight)] bg-[var(--glass-bg)] backdrop-blur-md hover:bg-[var(--glass-highlight)] shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]'
+            ${
+              isDragging
+                ? 'border-[var(--glass-border)] bg-[var(--glass-bg)] backdrop-blur-xl scale-[1.02] shadow-[var(--shadow-color)]'
+                : 'border-[var(--glass-border)] hover:border-[var(--glass-highlight)] bg-[var(--glass-bg)] backdrop-blur-md hover:bg-[var(--glass-highlight)] shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]'
             }
             ${preview ? 'p-0 overflow-hidden border-[var(--glass-border)]' : 'p-10'}
           `}