Fix/8944 file picker maintain state by ragini-pandey · Pull Request #9362 · elastic/eui

ragini-pandey · 2026-02-06T17:20:36Z

Summary

This PR adds a new files prop to EuiFilePicker that allows developers to control the displayed file state between renders.

The implementation:

Added a new optional files prop of type FileList | null
Initializes promptText state from the files prop if provided
Added componentDidUpdate to sync the displayed state when the files prop changes
Extracts the file name display logic into a reusable getPromptTextFromFileList method

Note: Due to browser security restrictions, the actual <input type="file"> cannot be programmatically set with files. This prop only controls the displayed state (file names in the prompt). The actual file data should be stored and managed separately in application state.

Testing: Can be tested locally at http://localhost:6006/?path=/story/forms-euifilepicker--controlled-with-files-prop

Why are we making this change?

Closes #8944

When using EuiFilePicker in multi-page forms or wizards, the file picker resets its visual state when unmounted, even though the file data may still be stored in application context. This causes user confusion as they navigate back to a step and see an empty file picker despite having already selected files.

This change allows developers to pass a files prop to maintain the displayed state, providing a better user experience for multi-step workflows.

Screenshots #

N/A - No visual changes. The component displays the same file information, but now can be controlled via props.

Screen.Recording.2026-02-24.at.9.33.55.PM.mov

Impact to users

Non-breaking change. This is an additive feature that introduces a new optional files prop. Existing implementations will continue to work unchanged.

Users who want to maintain file picker state across re-renders can now pass stored FileList data to the files prop to display the previously selected file names.

QA

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests (No visual changes)
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label~~ (Not a breaking change)
- ~~If the changes unblock an issue in a different repo, smoke tested carefully~~
Designer checklist
- ~~If applicable, file an issue to update EUI's Figma library~~ (No visual/design changes)

…or file handling

… function readability

…8944-file-picker-maintain-state

github-actions · 2026-02-06T17:20:48Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

…tween renders

mgadewoll · 2026-02-23T09:05:56Z

packages/eui/src/components/form/file_picker/file_picker.stories.tsx

+
+    return (
+      <div>
+        <p style={{ marginBottom: 16 }}>


Let's use EUI components instead here to ensure baseline styles:

// p -> EuiText <EuiText> <p></p> </EuiText> // button -> EuiButton <EuiButton>...</EuiButton>

A note on the custom styling: We generally don't use inline styles unless it's a dynamic style. If you want custom styles, use css to apply an Emotion style instead.
That being said, for these kind of spacing-only needs you can rather use EuiSpacer to space out your components.

Some general guidelines for choosing what to use:

EuiSpacer: when you need a simple spacing between elements, no need to apply an Emotion style for it (it's also valid though)

custom styles via css:

whenever you have more styles than just spacing, you can combine them instead of adding a EuiSpacer

whenever you need specific conditional spacing that you can't (or don't want to) handle with conditional rendering

custom styles via style attribute: for dynamic styles only

Done.
Refactored the code as per your suggestions

mgadewoll · 2026-02-23T09:07:02Z

packages/eui/src/components/form/file_picker/file_picker.stories.tsx

+ * This is useful for multi-step forms where the component may unmount
+ * and remount while the file data is stored in context/state.
+ */
+export const ControlledWithFilesProp: Story = {


Tiniest nit: Imho this can be shortened to ControlledWithFiles

mgadewoll · 2026-02-23T09:24:21Z

packages/eui/src/components/form/file_picker/file_picker.stories.tsx

+          onClick={() => setShowPicker(!showPicker)}
+          style={{ marginBottom: 16 }}
+        >
+          Toggle Picker (Currently: {showPicker ? 'Visible' : 'Hidden'})


Nit: Imho, we don't need to specify the visual state as part of the label, the render output is clear by itself (rendered, not rendered). Let's instead rename the label to be more precise on what it toggles, e.g. {showPicker ? 'Hide' : 'Show'} Picker.

mgadewoll · 2026-02-23T09:51:20Z

packages/eui/src/components/form/file_picker/file_picker.stories.tsx

+ * and remount while the file data is stored in context/state.
+ */
+export const ControlledWithFilesProp: Story = {
+  render: function Render() {


Let's pass down the Storybook args to the EuiFilePicker. This allows the controls to be properly set up and for us to define some controls to be useable for the story.

Let's also add what controls we would want to be displayed/useable for testing and documentation:

export const ControlledWithFilesProp: Story = { parameters: { controls: { include: ['files', 'multiple', 'disabled'], // adding multiple to provide means to test with multiple files }, }, ... }

mgadewoll · 2026-02-23T10:22:10Z

packages/eui/src/components/form/file_picker/file_picker.tsx


  generatedId: string = htmlIdGenerator()();

+  getPromptTextFromFileList = (


We should be able to reuse this here in handleChange

And I think we can simplify it a bit with that:

if (this.fileInput.files && this.fileInput.files.length === 1) { this.setState({ promptText: this.fileInput.value.split('\\').pop() }); } else { this.setState({ promptText: this.getPromptTextFromFileList( this.fileInput.files ? Array.from(this.fileInput.files) : null ), }); }

mgadewoll · 2026-02-23T10:55:27Z

packages/eui/src/components/form/file_picker/file_picker.tsx

+    isHoveringDrop: false,
+  };
+
+  componentDidUpdate(


💭 I know the this wasn't specifically touched, but considering that we have componentDidUpdate now here, I think we should update removeFiles (code).

Currently it will do the following:
removeFiles -> this.handleChange() -> onChange(this.fileInput.files)

If I'm reading this correctly, then this means that the consumer that stores the files argument coming from onChange and passes it back to the component as files will have an empty array. And if the consumer has a condition check for updating state based on onChange that looks something like e.g. files && files.length > 0) then the files are not updated. Passing null will ensure it's fully unset.

This could be changed here:

onChange( this.fileInput.files && this.fileInput.files.length > 0 ? this.fileInput.files : null );

mgadewoll · 2026-02-23T11:32:41Z

packages/eui/src/components/form/file_picker/file_picker.test.tsx

+      expect(screen.getByText('updated-file.txt')).toBeInTheDocument();
+    });
+
+    test('shows clear button when files prop is set', () => {


We should also test that:

clears file name on clear

clicking the clear button triggers the onChange

clear button is removed after clearing

packages/eui/src/components/form/file_picker/file_picker.test.tsx

mgadewoll · 2026-02-23T11:36:38Z

packages/eui/src/components/form/file_picker/file_picker.tsx

+   * the displayed state (file names in the prompt). The actual file data
+   * should be stored and managed separately in your application state.
+   */
+  files?: FileList | null;


While this is correct to align it with the native type passed in onChange, I would suggest to use File[] instead. Since we can't pass the files back to the <input> element anyway, having an array passed could make the usage for consumers easier as it is easier to construct and handle it on consumer side.
It does require the consumer to use e.g. Array.from() on the onChange argument but but imho that should be acceptable for a more flexible API.

Done.
Using files?: File[] | null; now

packages/eui/changelogs/upcoming/9362.md

mgadewoll · 2026-02-23T13:52:00Z

💭 General thought: EuiFilePicker is still a class component. It could be an additional task (in a separate PR) to migrate it to a functional component.

ragini-pandey · 2026-02-24T16:17:53Z

💭 General thought: EuiFilePicker is still a class component. It could be an additional task (in a separate PR) to migrate it to a functional component.

+1.
I am happy to work on it if anyone from EUI team creates an issue and help wanted label

ragini-pandey added 3 commits February 6, 2026 22:42

[FilePicker] Enhance state management with files prop and add tests f…

3b2d844

…or file handling

[FilePicker] Refactor formatting for stored files display and improve…

bee714f

… function readability

Merge branch 'main' of https://github.com/ragini-pandey/eui into fix/…

721cda3

…8944-file-picker-maintain-state

ragini-pandey requested a review from a team as a code owner February 6, 2026 17:20

github-actions bot added the community contribution (Don't delete - used for automation) label Feb 6, 2026

ragini-pandey and others added 2 commits February 6, 2026 22:54

[FilePicker] Add files prop for controlled file state management be…

9f41a3e

…tween renders

Merge branch 'main' into fix/8944-file-picker-maintain-state

4e8dd15

mgadewoll self-requested a review February 12, 2026 13:52

mgadewoll reviewed Feb 23, 2026

View reviewed changes

ragini-pandey and others added 3 commits February 24, 2026 21:26

[FilePicker] Fixed review comments

162192c

[FilePicker] Fixed review comments

68df272

Merge branch 'main' into fix/8944-file-picker-maintain-state

d473969

ragini-pandey requested a review from mgadewoll February 24, 2026 16:18


		generatedId: string = htmlIdGenerator()();

		getPromptTextFromFileList = (

Conversation

ragini-pandey commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

github-actions bot commented Feb 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ragini-pandey Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mgadewoll commented Feb 23, 2026

Uh oh!

ragini-pandey commented Feb 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ragini-pandey commented Feb 6, 2026 •

edited

Loading

ragini-pandey Feb 24, 2026 •

edited

Loading