feat: enhance drag-and-drop file upload component #410
Open
Madhavi1108 wants to merge 1 commit into
Open
Conversation
|
@Madhavi1108 is attempting to deploy a commit to the Durgeshwar's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR enhances the existing file upload experience by extending the
FileUploadAreaanduseFileUploadimplementations with clipboard paste support, configurable validation limits, single/multi-file upload modes, and improved accessibility. These improvements build upon the existing drag-and-drop functionality while preserving backward compatibility with current upload workflows.The implementation leverages reusable hook configuration, accessible input handling, and configurable upload behavior to provide a more flexible and user-friendly upload experience across the application.
Closes #319
Type of Change
Checklist
What Was Implemented
Clipboard Paste Support
Extended the upload workflow to support direct clipboard pasting.
Updated Hook
useFileUpload.jsThe hook now listens for the global
pasteevent and automatically detects pasted files such as:Pasted files are processed through the same validation and upload pipeline as manually selected or dragged files.
Configurable File Validation
Introduced configurable validation rules for uploaded files.
Updated Hook
useFileUpload.jsThe hook now accepts an
optionsobject supporting:maxSizemaxFilesDefault values remain:
This allows different tools to customize upload restrictions without duplicating validation logic.
Enhanced Validation Feedback
Improved user feedback for invalid uploads.
Validation now displays clear toast notifications when:
These messages help users quickly understand and resolve upload issues.
Configurable Upload Modes
Extended the upload component to support both single-file and multi-file workflows.
Updated Component
FileUploadArea.jsxThe component now accepts:
multiplefilesproperties to control upload behavior dynamically.
This enables the same component to be reused across tools with differing upload requirements.
Native Multi-File Selection
Updated the underlying file input to support browser-native multi-file selection.
When
multipleis enabled:Single-file behavior remains unchanged by default.
Improved Upload Summary
Enhanced the component's display logic for multi-file scenarios.
Instead of showing only a single filename, the interface now presents summaries such as:
3 files selectedThis provides clearer feedback when multiple uploads are involved.
Accessibility Improvements
Improved keyboard accessibility for the upload component.
The hidden file input was updated from:
className="hidden"to:
className="sr-only"allowing keyboard users to navigate to the input while keeping it visually unobtrusive.
Visible Focus Indicators
Added focus styling to improve keyboard navigation.
The upload area now utilizes:
focus-within:ring-2focus-within:ring-[var(--color-app-primary)]to provide a visible focus state whenever the underlying file input receives keyboard focus.
This improves compliance with accessibility best practices while preserving the existing UI design.
Backward Compatibility
Maintained compatibility with existing upload workflows.
Without additional configuration:
No existing pages require modification to adopt the new behavior.
Shared Upload Pipeline
All supported upload methods now reuse the same processing flow.
Whether files are:
they pass through identical validation and upload handling, ensuring consistent behavior across all entry points.
Benefits
Acceptance Criteria
maxSizesupportedmaxFilessupportedmultipleprop supportedfilesprop supportedsr-onlyaccessibility update appliedTechnical Notes
useFileUploadhook now accepts configurable validation options while preserving default behavior, allowing upload constraints to be customized per use case without changing shared logic.FileUploadArea.jsxnow supports configurable single-file and multi-file modes through dedicated component props while enhancing UI feedback for multiple selected files.focus-withinstyling to improve keyboard navigation and WCAG compliance.