(UX) File Field Edit Mode: Gallery/Grid View Revamp.

[n2ojim]

Scope & Context

We are working on improving the user experience for managing multiple files and images within records. Since the maximum files limit was recently increased from 10 to 60, the current UI is no longer suitable.
This specific ticket focuses on the foundational change: replacing the small vertical list with a mosaic/grid layout when editing a file field, to easily view and manage large numbers of files.

Current behavior

Currently, when clicking the edit (pencil) icon on a file/image field, the UI displays a very small vertical list. Thumbnails are too small to properly identify photos, and having to scroll through a long list of up to 60 files is tedious. Users find image management extremely painful and counter-productive compared to industry standards.

Expected behavior

When clicking the edit (pencil) icon on a file field, the UI should open a larger mosaic/gallery view to properly manage files.

1. Gallery view: Photos and files should be displayed in a responsive mosaic/grid layout instead of a vertical list.
2. Larger Thumbnails: Thumbnails should be large enough to easily identify image content at a glance.
3. Basic File Info: Display the file name underneath the thumbnail.

Technical inputs

• Create a new FileGallery or FileGridView component.
• Replace the current vertical list component within the file field's edit mode modal/dropdown with this new grid component.
• Ensure the grid is responsive and handles up to 60 items efficiently (consider using CSS Grid or Flexbox with wrap).

[rawal21]

Hi,

I'd like to work on this issue.

I'm currently setting up the project locally and investigating the existing file field edit component. I'll start with the gallery/grid view implementation.

[thomtrp]

Hi, thanks for your feedback. We use issues for bugs, features like this should be discussions first!