elastic / elastic/eui

Add support for image previews within the FilePicker component

Open
#8,995 6 comments 0 reactions 0 assignees View on GitHub
request stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

**Problem Statement**

Add support for image previews within the FilePicker component.

**Proposed Solution**

Slight redesign to fit the thumbnail in large=false variant within the FilePicker component.

**Use Case**

For our users, being able to see a thumbnail of the image they've selected would be a great user experience improvement, helping them confirm they've chosen the correct file before uploading.

Almost every open source FilePicker has this functionality

**Value / Impact**

For our users, being able to see a thumbnail of the image they've selected would be a great user experience improvement, helping them confirm they've chosen the correct file before uploading.

**Urgency**

Its a good to have feature, Gives modern look and feel to filePicker

**Do alternatives or workarounds exist?**

**Related code or customizations**

**Additional context (Optional)**

Image

**Designs or Specs (Optional)**

Contributor guide

Open the contributing guide

Research direction

Locate the FilePicker component and inspect how the large=false variant is rendered. Use the attached design context to define the thumbnail behavior, then verify that selected image files show previews while the existing picker states remain usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.