[EuiTextArea] Add Support for file/image upload + show preview of uploaded image/file

[abhishek-deshmukh-el]

Is your feature request related to a problem? Please describe.

Yes, this feature request addresses the current lack of built-in support within EUI components for a common pattern needed in modern interactive interfaces, particularly those involving multimodal input like AI chat or rich commenting systems. Specifically, there is no integrated component that combines a text input area with the ability for users to easily upload files or images and see a visual preview of these uploads directly alongside or below the text input field before submission.

Right now there is no support for file/image upload + show preview of uploaded image/file

In my opinion EuiTextArea component is the best place to add.

Examples of this desired user experience can be seen in interfaces like Gemini and ChatGPT:

eg: Gemini

eg: ChatGPT

Describe the solution you'd like

We would like a component or enhancement within EUI that provides an integrated experience for text input combined with file/image upload and preview. The desired functionality includes:

1. A primary text input area (similar to EuiTextArea or a multiline EuiFieldText).
2. A clear visual control (e.g., an icon like a paperclip or image icon) for initiating file upload, potentially supporting drag-and-drop onto the component area.
3. The ability to select and stage one or more files/images for upload.
4. Display of visual previews (e.g., thumbnail for images, icon/name for other file types) of the staged files/images, ideally positioned below the text input area, similar to the examples provided.
5. A mechanism to remove staged files/images before the final submission action.
6. A way to access the list of staged files when the user is ready to "submit" the combined input (text + files).

Regarding where this functionality could reside, while the user initially suggested enhancing EuiTextArea, another approach could be to introduce a new composite component (e.g., EuiChatInput, EuiUploadTextInput, or similar) that encapsulates the EuiTextArea, file upload logic, and preview display. This new component would manage the state of both text and uploaded files.

---

Describe alternatives you've considered Alternate UI component from a public library

---

Desired timeline Our elasticGPT roadmap includes adding file/image upload support within the next month. Having this feature available in EUI during that timeframe would be highly beneficial.

---

Additional context

The provided screenshots from Gemini and ChatGPT clearly illustrate the desired user experience and layout: a combined input area where text is typed and attached files/images are shown as previews directly within the input component's visual boundary before the user triggers a submit action. This pattern is crucial for applications requiring rich, multimodal input from users.

Existing ElasticGPT:

eg: Gemini

eg: ChatGPT

cc: @adhishthite

[JasonStoltz]

@abhishek-deshmukh-el Thank you for Feature Request.

Regarding the timeline, we unfortunately won't be able to add feature support for this within the month.

If someone from the @elastic/eui-team has time, we may be able to recommend a way of building something on top of our text components, but I'm not sure whether we'll be able to or not.

If you have a tight timeline, I recommend seeking an alternative solution in the meantime.

Long term, we would like to add patterns and features to EUI to support AI chat experiences, as we have numerous relevant use cases.

We'll leave this feature request open and update on it when we can.

[acstll]

Sharing some thoughts upfront. Enhancing EuiTextArea is probably not a good idea due to the complexity of the requirements, I would be more in favor of a new composite component as suggested, or even (probably better) providing some new "primitives" plus guidance for a pattern.

Another thing worth mentioning is that a plain <textarea> input (what EuiTextArea renders) might not be the most appropriate. AI chats I know use rich text (a contenteditable div) (e.g. Claude uses Prosemirror under the hood). At the moment there's no such component in EUI. We do have a file input, but I'm not sure it fits the requirements either.

Some screenshots illustrating that the actual text input is a small part of the composition

I imagine a wrapper for the layout that handles "file drop" for uploading files, a first container for the previews, then the rich text area, and below a toolbar including the "send" button.

If someone from the @elastic/eui-team has time, we may be able to recommend a way of building something on top of our text components, but I'm not sure whether we'll be able to or not.

I think we're lacking the essential primitives (rich text and "file drop"), but maybe we can use EiuTextArea for a first prototype? (if we have time)

Long term, we would like to add patterns and features to EUI to support AI chat experiences, as we have numerous relevant use cases.

just stating what @JasonStoltz already mentioned, from @elastic/eui-team we'd love to be part of the discussions around this topic from the beginning