[EuiFilePicker] Migrate from class to function component

[mehuljariwala]

Summary

What: Migrates EuiFilePicker from a class component to a function component.

Why: Closes #9495.

How:

Before	After
class EuiFilePickerClass extends Component	FunctionComponent<EuiFilePickerProps>
withEuiStylesMemoizer HOC + stylesMemoizer prop	useEuiMemoizedStyles(euiFilePickerStyles)
static contextType = FormContext	useFormContext()
static defaultProps	destructuring defaults
fileInput instance field + callback ref	useRef<HTMLInputElement>
this.state / setState	useState ×2
componentDidUpdate	useEffect keyed on files
htmlIdGenerator()()	useGeneratedHtmlId()
<EuiI18n> render-prop wrapper	useEuiI18n()

Two decisions worth flagging for reviewers:

1. The files effect keeps a previous-value ref. A bare useEffect(..., [files]) also runs on mount, which would trigger a redundant second render in the multi-file case, since getPromptTextFromFileList returns a fresh EuiI18n element that can never reference-compare equal. The ref guard makes the effect fire only on an actual prop change, matching componentDidUpdate exactly.

2. promptText is deliberately not derived during render. The existing test clears file name when clear button is clicked clears the input while the files prop is still set, so re-deriving from props on every render would resurrect the filename and break it.

The EuiFilePickerClass export is removed along with the HOC. It was never re-exported from index.ts (only EuiFilePicker and EuiFilePickerProps are public), so this stays internal-only.

I also swapped htmlIdGenerator()() for useGeneratedHtmlId() while here, which clears one more function-component usage tracked in #7093.

One note on the issue description: it lists the class as 262 lines with Lifecycle: None, but it is currently 382 lines and does have a componentDidUpdate, handled as described above.

API Changes

None — this is an internal refactor.

component / parent	prop / child	change	description
EuiFilePicker	—	None	Internal refactor only; no public API surface changed

Screenshots

No visual changes — rendered markup is identical, and the existing snapshot passes unmodified.

Impact Assessment

• 🔴 Breaking changes
• 💅 Visual changes
• 🧪 Test impact
• 🔧 Hard to integrate

Impact level: 🟢 None

Release Readiness

• Documentation — no doc changes; behavior and API are unchanged
• Figma — no design changes
• Migration guide — no breaking or visual changes
• Adoption plan — not a new feature

Changelog: this is an internal implementation change with no consumer-facing impact, so per the changelog guide I believe skip-changelog applies here — matching #9558, #9667 and #9831, which each migrated a component to a function component with no changelog entry. I'm happy to add one if you'd prefer; I can't apply the label myself.

QA instructions for reviewer

Open the EuiFilePicker Storybook stories:

• Selecting a single file shows its filename in the prompt.
• Selecting multiple files shows "N files selected".
• The clear button appears once a file is selected, resets the prompt to initialPromptText, and calls onChange with null.
• Dragging a file over the input applies the dropping state, and does not when disabled.
• The files prop still controls displayed state, including when the prop reference changes.
• fullWidth still inherits from a wrapping <EuiForm fullWidth>.
• isLoading, isInvalid, compressed and display="default" render as before.

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes — no docs changes
• Tests: Existing Jest suite passes unchanged — 13 file_picker tests with the snapshot unmodified, and the full src/components/form suite (38 suites / 382 tests / 222 snapshots) green, plus tsc --noEmit and ESLint clean. No new tests added: the migration is behavior-preserving and the existing suite already covers the state and clear-button paths.
• Changelog: see note above re skip-changelog
• Breaking changes: label — none

[cla-checker-service]

💚 CLA has been signed

[github-actions]

👋 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?

[github-actions]

👋 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?

[weronikaolejniczak]

buildkite test this

[Copilot]

Pull request overview

Migrates EuiFilePicker from a class component to a function component while preserving behavior, markup, and the existing test suite expectations for controlled files display state, clearing, and drag-over styling.

Changes:

• Converted class lifecycle/state/refs to hooks (useState, useRef, useEffect, useCallback) while keeping the files-driven prompt text update semantics aligned with the prior componentDidUpdate.
• Replaced legacy patterns with hook equivalents (useFormContext, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiI18n) and removed the withEuiStylesMemoizer HOC/class export.
• Kept prompt text state intentionally independent from files during render to preserve the existing “clear while files is still set” behavior covered by tests.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[weronikaolejniczak]

The refactor works great 💪🏻 I didn't notice any regression compared to prod and VRTs pass.

One improvement we could do: add a "MultipleFiles" story that passes the multiple prop or have the control to toggle this in "Playground" story.

Thanks for contributing, @mehuljariwala 🙌🏻

[mehuljariwala]

Hello @weronikaolejniczak,

Thank you for taking the time to review this. I have a well-defined plan to migrate all the components one by one, which will allow us to maintain a clean codebase and ensure everything remains well-structured and manageable throughout the migration.

[weronikaolejniczak]

@mehuljariwala please be aware we receive contributions only for issues labeled as "help wanted".

[mehuljariwala]

@mehuljariwala please be aware we receive contributions only for issues labeled as "help wanted".

Yes sounds good

[weronikaolejniczak]

@mehuljariwala there's a syntax error. I would advise to test your changes properly before pushing. Spin up Storybook, documentation website! 😄

[mehuljariwala]

@mehuljariwala there's a syntax error. I would advise to test your changes properly before pushing. Spin up Storybook, documentation website! 😄

Yes done thank you @weronikaolejniczak

[weronikaolejniczak]

@mehuljariwala you've addressed the typo but you haven't actually went and updated the style 🤔

[mehuljariwala]

Oh yeah correct give me one moment i am checking on that as well

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 3cfeffb
• Documentation website
• Storybook
• ✅ Visual regression tests passed

Failed CI Steps

• :docusaurus: Build and deploy website
• 📖 Build and deploy Storybook

History

• 💔 Build #4650 failed e177723
• 💚 Build #4616 succeeded ba2a424

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 3cfeffb

Failed CI Steps

• 🔨 EUI pull request test

History

• 💔 Build #7373 failed e177723
• 💚 Build #7348 succeeded ba2a424