🎨 Palette: [UX improvement] 배치 파일 업로드 크기 검증 및 동적 에러 메시지 개선

[seonghobae]

💡 What

saas_web.py 내의 파일 업로드 폼(단일 및 일괄 업로드)에서 하드코딩된 '5 GiB' 에러 메시지를 백엔드의 MAX_UPLOAD_BYTES 값에 맞춰 동적으로 생성되도록 개선했습니다. 특히, 일괄 파일 업로드 폼에 대해서는 선택된 모든 파일의 총 크기를 합산하여 서버 제한을 초과할 경우 즉각적인 인라인 에러 피드백을 제공하도록 클라이언트 단 검증 로직을 추가했습니다.

🎯 Why

사용자가 여러 개의 대용량 파일을 일괄 업로드할 때 총 파일 크기를 파악하지 못해 업로드 제한을 초과하거나 긴 업로드 대기 시간 후에야 서버 측 에러를 발견하는 답답한 상황을 방지하기 위함입니다. 프론트엔드 단에서 실시간 피드백을 줌으로써 전반적인 사용성을 크게 향상시킵니다.

📸 Before/After

Before:

• 일괄 업로드 시 개별 파일 크기만 표시되고 전체 제한 초과 여부를 즉시 알 수 없음.
• 파일 크기 한계가 에러 메시지에 '5 GiB'로 하드코딩되어 백엔드 값 변동 시 오해의 소지가 있음.

After:

• 동적으로 포맷팅된 제한 크기 텍스트가 오류 메시지에 출력됨.
• 여러 파일을 선택했을 때 총 파일 크기가 최대 한도를 넘어서면 텍스트가 붉게 변하며 즉각 에러 텍스트(exceeds X GiB limit) 출력.

♿ Accessibility

• 자바스크립트를 이용해 커스텀 에러 로직 발동 시 setCustomValidity와 더불어 시각 장애를 가진 사용자의 스크린 리더에서 읽힐 수 있도록 동적으로 aria-invalid='true' 속성을 완벽히 연동시켰습니다. 에러 메시지는 붉은색(dc3545) 텍스트로 명확한 시각적 피드백을 제공합니다.

---

PR created automatically by Jules for task 1972778485267174059 started by @seonghobae

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[Copilot]

Pull request overview

This PR improves the FastAPI upload UI (saas_web.py) by making the client-side upload size error messaging derive from the configured size limit constant, and by adding batch-upload total-size validation to provide immediate inline feedback when a selection exceeds the limit.

Changes:

• Updated file-size validation messages to dynamically format the limit text from MAX_UPLOAD_BYTES instead of hardcoding 5 GiB.
• Added client-side validation for batch uploads to reject selections whose combined file size exceeds the configured limit, with inline preview + setCustomValidity + aria-invalid.
• Updated UI snapshot-style tests to assert the new dynamic error-message construction.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
saas_web.py	Formats upload-limit text dynamically and adds total-size validation for batch file selections.
tests/test_saas_web.py	Updates assertions to match the new dynamic validation/error-message strings.
CHANGELOG.md	Adds an entry documenting the UX improvement.
.jules/palette.md	Records a UX/accessibility learning/action note related to dynamic limit formatting and batch validation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.