-
Notifications
You must be signed in to change notification settings - Fork 57
Open
Description
Feature Request: More Flexible FileInput API
Problem
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
placeholderprop - 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!
Metadata
Metadata
Assignees
Labels
No labels