Implement client-side file size validation and improved error handling

[bdart]

Implement client-side file size validation and improved error handling

Current Behavior

Currently, when users attempt to upload files larger than the 20MB limit, the upload proceeds and fails only after the full file is transmitted, resulting in:

1. Wasted bandwidth and time for users
2. A generic error message from the server
3. Poor user experience with no advance warning about size limitations

Proposed Solution

Implement comprehensive client-side file size validation:

1. Client-side validation:

   • Add file size checking before upload begins
   • Prevent uploads of files exceeding 20MB
   • Show clear max file size information in the UI

2. Improved error handling:

   • Capture and parse 413 Payload Too Large responses from backend
   • Display user-friendly error messages
   • Implement retry logic with guidance on file size reduction

3. UI enhancements:

   • Add visual indicators of file size limits
   • Show file size during selection process
   • Implement progress indicators that include size validation status

Implementation Notes

• Update useFileDropzone hook to include size validation
• Enhance error handling in upload components
• Add proper UI feedback in the file upload component
• Consider implementing file compression options for large files

Acceptance Criteria

• Frontend validates file size before starting upload
• UI clearly indicates the 20MB file size limit
• User-friendly error messages appear when files exceed size limits
• Graceful handling of 413 responses from backend

[bdart]

Blocked by: #139