Skip to content

[FileInput] Add support for customizable layout and composition #106

@cihad

Description

@cihad

Feature Request: More Flexible FileInput API

Problem

The current FileInput component has a rigid structure that doesn't allow customization of key areas:

  1. Drop Zone Area: Cannot customize the drag-and-drop area layout or styling beyond the placeholder prop
  2. File List Container: No control over how the list of files is rendered (grid, list, carousel, etc.)
  3. 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

Image Image Image Image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions