Improve file handling and layout for file inputs #379
Conversation
WalkthroughThe changes update the file input component to allow appending newly selected or dropped files to the existing file list when multiple file selection is enabled, rather than replacing the entire list. The event handlers for both file selection and drag-and-drop were updated to merge new files with the current model value if appropriate. Additionally, the default input element's CSS classes were adjusted to include extra padding for improved spacing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FileInputComponent
participant Model
User->>FileInputComponent: Selects or drops files
FileInputComponent->>FileInputComponent: handleChange/dropFileHandler
alt Multiple selection enabled and model has files
FileInputComponent->>Model: Append new files to existing files
else Single selection or no existing files
FileInputComponent->>Model: Replace model with new file(s)
end
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/FwbFileInput/FwbFileInput.vue (1)
147-156: Enhanced drag-and-drop file handling for files with opportunity for refactoring.The implementation correctly handles appending files from dataTransfer.files, but there's duplicate logic between handling items and files sections.
Consider refactoring the duplicate logic in the dropFileHandler method to reduce code duplication:
const dropFileHandler = (event: DragEvent) => { event.preventDefault() let filesToAdd: File[] = [] if (event.dataTransfer?.items) { filesToAdd = Object.values(event.dataTransfer.items) .filter((item: DataTransferItem) => item.kind === 'file') .map((item: DataTransferItem) => item.getAsFile() as File) .filter(Boolean); } else if (event.dataTransfer?.files) { filesToAdd = Array.from(event.dataTransfer.files) } if (props.multiple) { if (Array.isArray(model.value) && model.value.length > 0) { model.value = [...model.value, ...filesToAdd] } else { model.value = filesToAdd } } else { model.value = filesToAdd[0] || null } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/FwbFileInput/FwbFileInput.vue(3 hunks)src/components/FwbFileInput/composables/useFileInputClasses.ts(1 hunks)
🔇 Additional comments (4)
src/components/FwbFileInput/composables/useFileInputClasses.ts (1)
5-5: Improved spacing with added padding classes.The addition of
py-1 px-2padding classes enhances the visual appearance and usability of the file input element by providing appropriate spacing around the content.src/components/FwbFileInput/FwbFileInput.vue (3)
58-58: Fixed event handling for hidden dropzone input.Adding the change event handler to the hidden file input element ensures that file selection through the dropzone properly triggers the update logic.
116-121: Improved multiple file handling in the change event.The updated implementation now properly accumulates files when multiple selection is enabled rather than replacing the entire selection. This provides a more intuitive user experience when selecting multiple files.
138-145: Enhanced drag-and-drop file handling for items.The improved logic now correctly appends files to existing selections when multiple files are enabled, consistent with the behavior in the change handler.
Enhance the file handling logic in FwbFileInput to support multiple file uploads more effectively. Adjust the default file input classes to include padding for better layout and usability.
Summary by CodeRabbit
New Features
Style