Overview
How might we show what the model read from an attachment before send so uploads feel inspectable, not opaque?
When file context shapes the answer
- ChatGPT-style composers where PDFs, spreadsheets, and images become prompt context.
- Turns where the user should verify parse status, summary, or thumbnail before asking questions.
- Products that mix attachments with text in one send without clearing other composer state.
- Flows where parsing delay, failure, or partial read must be visible instead of silent.
When a filename chip is enough
- Tiny text pastes that do not need a preview card.
- Virus-scanning delays that would block every send (show progress instead).
- Binary blobs the product cannot meaningfully summarize.
States
Design parse feedback in the composer, not only a paperclip icon.
Idle
No attachment. Attach lives in the bar or + menu with a clear entry point.
Attaching
Upload or picker runs. A chip or card appears with filename, type, and size.
Parsing
The product reads the file. Progress or a scanning state proves work started.
Preview ready
Summary, thumbnail, or extracted fields show what the model understood. Send unlocks when parse succeeds.
Composing
Prompt text and preview coexist. Remove control clears the file without resetting the whole composer.
Failed
Parse or scan errors surface plainly with retry or remove. Do not let send proceed on unread content.
Key UX elements
The parts that must be present for attachments to feel trustworthy pre-send.
Make upload reachable from the composer.
Paperclip, + menu row, or drag target should sit where people already type, not in a separate screen.
Show filename and type at a glance.
A removable chip or card beats a hidden attachment that only appears after send.
Expose parsing progress and errors.
Scanning, ready, and failed states should be visible before the model answers from the file.
Summarize what the model saw.
Short AI summary, first-page thumb, or key fields let people catch wrong files early.
Block send on unread or failed files.
Do not ship turns that depend on content the parser could not read.
Anti-patterns to avoid
Attachments with only a filename and no parse status.
Previews that hallucinate contents not in the file.
Failing silently when parsing fails.
Including file bytes in share links without permission.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | File cards with analysis status in the composer. |
| Claude | Document uploads with readable context summaries. |
| Notion | Imported files with AI-assisted previews. |
| Google Drive | AI overviews and previews on stored files. |
Real-world examples
How shipped products implement file upload with ai preview, from our teardown guides.
ChatGPTChatGPT composer UX: input bar, tools & voice design
Design the composer
ClaudeClaude composer UX: model picker, skills & attachments
Design the composer
DeepSeekDeepSeek composer UX: DeepThink, Search & modes
Design the composer
GeminiGemini composer UX: tools, Drive & thinking modes
Design the composer
Google AI ModeGoogle AI Mode composer UX: Canvas, Create & Lens
Design the composer
GrokGrok composer UX: skills, models & voice input
Design the composer
LovableLovable composer UX: Build, Plan & templates
Design the composer
ManusManus composer UX: assign tasks, modes & agent tiers
Design the composer
PerplexityPerplexity composer UX: search modes & connectors
Design the composer
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "File Upload with AI Preview" AI interface design pattern.
Pattern Definition:Frequently asked questions
What should an AI file preview show?
Type, size, parse status, a short summary or first-page thumb, and remove control—before the model answers from it.
When is preview ready enough to ask questions?
When parsing succeeds or the user explicitly continues with partial context. Block claims that require unread pages.
How does this relate to multimodal input?
Multimodal covers mixing modalities in one turn. File upload preview is the affordance that makes file context trustworthy.
What if parsing fails?
Say so, offer retry or remove, and do not pretend the model read the file.