🎨 Palette: [UX improvement] Dynamic upload limit feedback

.jules/palette.md

@@ -1,3 +1,7 @@
+## 2024-07-14 - Dynamic limits in inline client-side form validation
+**Learning:** Hardcoding limit sizes (like "5 GiB") in client-side error and preview messages creates a maintenance risk when underlying constants (`MAX_UPLOAD_BYTES`) change. It also breaks a11y feedback if the text fails to accurately reflect the true limit.
+**Action:** Always format backend-enforced size constants (e.g., `formatBinaryBytes(MAX_UPLOAD_BYTES)`) dynamically within client-side validation logic instead of hardcoding human-readable values.
+
 ## 2024-07-12 - Intercepting batch form submissions for testing visual loading states
 **Learning:** Extending the learning from 2024-06-13, intercepting form submissions using `e.preventDefault()` via `page.evaluate()` is essential for capturing screenshot and video evidence of loading states (e.g., button disabling, spinner appearing) on forms like batch upload where the submission would normally reload the page or download an archive.
 **Action:** When testing visual loading states with Playwright, always inject an event listener using `page.evaluate()` to call `e.preventDefault()` on the form's `submit` event to freeze the UI in its loading state for verification.

CHANGELOG.md

@@ -4,3 +4,4 @@
 ### Added
 - 다중 파일 업로드 선택 시 즉각적인 파일 개수 피드백 및 제한 초과 경고 메시지 추가
 - 일괄 업로드 폼에 대상 바이트 프리셋 버튼과 총 파일 크기 미리보기를 추가하여 사용성을 개선했습니다.
+- 클라이언트 사이드 파일 크기 검증 로직에서 하드코딩된 업로드 제한 텍스트를 동적 바이트 형식으로 변경하여 정확한 접근성 피드백 제공

saas_web.py

@@ -229,10 +229,11 @@ async def add_security_headers(request: Request, call_next):
                     return;
                 }
                 const text = formatBinaryBytes(file.size);
+                const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);
                 if (file.size > MAX_UPLOAD_BYTES) {
-                    input.setCustomValidity('File exceeds 5 GiB limit.');
+                    input.setCustomValidity('File exceeds ' + limitText + ' limit.');
                     input.setAttribute('aria-invalid', 'true');
-                    preview.innerText = 'Selected file size: ' + text + ' (exceeds 5 GiB limit)';
+                    preview.innerText = 'Selected file size: ' + text + ' (exceeds ' + limitText + ' limit)';
                     preview.style.color = '#dc3545';
                     return;
                 }
@@ -325,6 +326,14 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     return;
                 }
+                const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);
+                if (totalSize > MAX_UPLOAD_BYTES) {
+                    input.setCustomValidity('Total size exceeds ' + limitText + ' limit.');
+                    input.setAttribute('aria-invalid', 'true');
+                    preview.innerText = 'Selected ' + files.length + ' file(s) (' + formatBinaryBytes(totalSize) + ', exceeds total ' + limitText + ' limit)';
+                    preview.style.color = '#dc3545';
+                    return;
+                }
                 preview.innerText = 'Selected ' + files.length + ' file(s) (' + formatBinaryBytes(totalSize) + ')';
             }
 

tests/test_saas_web.py

@@ -52,7 +52,10 @@ def test_get_ui_includes_binary_file_size_validation(self):
 
         self.assertIn("const MAX_UPLOAD_BYTES = 5 * 1024 * 1024 * 1024;", html)
         self.assertIn("['B', 'KiB', 'MiB', 'GiB']", html)
-        self.assertIn("File exceeds 5 GiB limit.", html)
+        self.assertIn("const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);", html)
+        self.assertIn("input.setCustomValidity('File exceeds ' + limitText + ' limit.');", html)
+        self.assertIn("preview.innerText = 'Selected file size: ' + text + ' (exceeds ' + limitText + ' limit)';", html)
+        self.assertIn("input.setCustomValidity('Total size exceeds ' + limitText + ' limit.');", html)
         self.assertIn("preview.style.color = '#0f6674';", html)
         self.assertIn('onchange="updateFileSizePreview(this)"', html)