Repository navigation
feat(data-grid): show file validation toasts - #1029
Conversation
- Show toast when files are rejected during drop - Display validation reason as main message - Show truncated filename in description - Handle multiple file rejections with count - Keep messages concise following DiceUI pattern
- Remove redundant error message below dropzone (toast is sufficient) - Clear error state when opening editor - Auto-clear invalid state after 2s timeout - Maintain visual red border feedback that fades
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the file upload validation UX in the data grid by replacing inline error messages with toast notifications. The changes improve user feedback by showing toast notifications when files are rejected due to validation failures (file type, size, or quantity limits), while removing the previously inline error display component.
Key Changes:
- Implemented toast notifications for file validation errors with contextual descriptions showing rejected file names
- Refactored error tracking from single error string to array of rejected files with reasons
- Removed inline error display component in favor of toast-based notifications
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setError(`Maximum ${maxFiles} files allowed`); | ||
| const errorMessage = `Maximum ${maxFiles} files allowed`; | ||
| setError(errorMessage); | ||
| toast(errorMessage); |
There was a problem hiding this comment.
[nitpick] Inconsistent error notification: When max files limit is exceeded, only a toast is shown (line 1383), but for file validation errors, both a toast with description is shown (lines 1422-1429). Consider adding a description to the max files toast for consistency, such as { description: "Please remove some files before adding more" } to provide users with actionable guidance.
| toast(errorMessage); | |
| toast(errorMessage, { | |
| description: "Please remove some files before adding more", | |
| }); |
| }); | ||
| if (!isAccepted) { | ||
| return `File type not accepted. Accepted: ${accept}`; | ||
| return "File type not accepted"; |
There was a problem hiding this comment.
Usability regression: Removing the accepted file types from the error message (Accepted: ${accept}) means users no longer see which file types are accepted when their upload is rejected. Consider adding this information back to the toast notification, perhaps in the description field, or display accepted file types in the dropzone UI (lines 1758-1764) alongside the max size and max files information.
| return "File type not accepted"; | |
| return `File type not accepted. Accepted: ${acceptedTypes.join(", ")}`; |
| setTimeout(() => { | ||
| setError(null); | ||
| }, 2000); |
There was a problem hiding this comment.
Accessibility concern: The error state is used for aria-invalid (line 1736), but it's automatically cleared after 2 seconds via setTimeout. This means screen readers and assistive technologies will lose the invalid state even though the user hasn't corrected the issue. Consider either not auto-clearing the error state, or only clearing it when the user takes a corrective action (e.g., removing files, closing the dialog).
| setTimeout(() => { | |
| setError(null); | |
| }, 2000); |
| setTimeout(() => { | ||
| setError(null); | ||
| }, 2000); |
There was a problem hiding this comment.
Potential memory leak: The setTimeout is not cleaned up if the component unmounts before the timeout fires. Store the timeout ID and clean it up in a useEffect cleanup function to prevent setting state on an unmounted component.
| setTimeout(() => { | ||
| setError(null); | ||
| }, 2000); |
There was a problem hiding this comment.
Potential memory leak: The setTimeout is not cleaned up if the component unmounts before the timeout fires. Store the timeout ID and clean it up in a useEffect cleanup function to prevent setting state on an unmounted component.
* feat: add toast notifications for file drop rejections - Show toast when files are rejected during drop - Display validation reason as main message - Show truncated filename in description - Handle multiple file rejections with count - Keep messages concise following DiceUI pattern * refine file drop rejection feedback - Remove redundant error message below dropzone (toast is sufficient) - Clear error state when opening editor - Auto-clear invalid state after 2s timeout - Maintain visual red border feedback that fades
* feat: add toast notifications for file drop rejections - Show toast when files are rejected during drop - Display validation reason as main message - Show truncated filename in description - Handle multiple file rejections with count - Keep messages concise following DiceUI pattern * refine file drop rejection feedback - Remove redundant error message below dropzone (toast is sufficient) - Clear error state when opening editor - Auto-clear invalid state after 2s timeout - Maintain visual red border feedback that fades
No description provided.