You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[FileInput] Add support for customizable layout and composition #106
The current FileInput component has a rigid structure that doesn't allow customization of key areas:
Drop Zone Area: Cannot customize the drag-and-drop area layout or styling beyond the placeholder prop
File List Container: No control over how the list of files is rendered (grid, list, carousel, etc.)
File Item Layout: Only the field component inside can be customized (e.g., <FileField> or <ImageField>), but not the item wrapper itself
This makes it impossible to create custom file upload UIs that many applications require. For example:
Grid layouts with custom cards
Compact horizontal file lists
File items with custom metadata displays
Different layouts for different file types
Additionally, there's no easy way for users to integrate FileInput's dropzone logic into their own custom components without reimplementing the entire component.
Screenshots
Possible Solutions
Some approaches that come to mind:
Render props pattern: Allowing custom render functions for different parts
Slot-based composition: Similar to Radix UI's approach with compound components
However, I understand these approaches would diverge from react-admin's FileInput API. I'd love to hear the maintainers' thoughts on how to best approach this while maintaining consistency with the react-admin ecosystem.
Use Case
We need this flexibility to:
Match specific design system requirements
Create more compact or expanded file upload UIs
Show different layouts based on file types (images vs documents)
Integrate custom validation feedback UI
Build reusable file upload patterns across the application
Would appreciate any guidance on the preferred direction for this enhancement!
Activity