← 4.74.9 →
1207 words Slides

4.8 Working with Files & Images

Course: Claude Code - Essentials Section: Claude Desktop App Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

Claude Code is multimodal—it doesn't just read text. You can drag files, paste images, take screenshots, and Claude will understand them. In this video, you'll learn how to use the desktop app's rich file handling to speed up debugging, documentation, and communication with Claude.

Key Talking Points

1. Multimodal Input (Why It Matters)

  • Claude Code is not text-only. It understands images, screenshots, PDFs, and structured files
  • The desktop app makes multimodal input natural: drag, drop, paste, capture
  • This unlocks faster debugging: instead of copy-pasting error text, show the actual error screenshot

What to say: "You're not limited to typing error messages. Show Claude a screenshot of your broken UI, and it understands the context instantly. Paste a design mockup, and Claude can translate it into implementation guidance."

What to show on screen: Show a split screen with a browser displaying an error/UI on one side and Claude's analysis of a screenshot on the other. Or show a design mockup image in the Claude UI with Claude analyzing it.

2. Drag-and-Drop Files (The Workflow)

Explain how drag-and-drop works in the desktop app: - Click into the input area, then drag any file (source code, logs, configs, images, PDFs) into it - The file becomes part of the conversation context immediately - Claude can reference, explain, analyze, or edit the file (with permission)

What to say: "Forget copy-pasting. Just drag your log file into the chat. Drag a screenshot of your error. Drag a JSON config. Claude gets it all—instantly."

What to show on screen: Demonstrate dragging a file (log, screenshot, code snippet, etc.) into the Claude UI. Show it being attached. Show Claude responding to it.

3. Screenshot Capability (Capturing Bugs)

Emphasize this is built into the desktop app: - Take a screenshot of your UI, error message, or broken state - Attach it directly to the conversation (usually Cmd/Ctrl+Shift+3 or through a menu option) - Claude analyzes the visual state and suggests fixes

What to say: "When your app breaks visually, a screenshot is worth a thousand words. Claude sees the exact layout, colors, and broken elements—and can suggest fixes faster than you could describe it."

What to show on screen: Show the screenshot capture feature (if available in the desktop app UI) or demonstrate a screenshot attachment being added to a conversation. Show Claude analyzing a visual error.

4. File Attachments & Context

Explain how attachments work across the session: - Files can be attached multiple times (don't clutter your history—they're referenced, not copied) - Claude retains context of attached files throughout the session - You can ask about the file again later without re-attaching it

What to say: "Once you attach a file, Claude remembers it. You can ask multiple questions about the same file, debug it iteratively, or generate documentation from it—all in one session."

What to show on screen: Show a file (like a code file or log) attached once, then ask multiple questions about it in subsequent prompts without re-attaching. Show the pattern.

5. PDF Support (Multi-Page Documents)

If included in the Feb 2026 release notes: - Attach PDF files, including large ones - Supports page range syntax: @file.pdf#1-10 for pages 1-10 - Claude can extract information, summarize, or act on PDFs

What to say: "Working with a long specification PDF or API documentation? Attach the relevant pages, and Claude reads only what you need. No copy-pasting entire PDFs into chat."

What to show on screen: Show a PDF file being attached to Claude, and Claude analyzing specific content from it (if available).

6. Images & Diagrams (Visual Design)

Explain how images enhance design discussions: - Upload design mockups, wireframes, or system architecture diagrams - Claude interprets visual structure and can suggest improvements - Useful for translating designs into code or identifying UI issues

What to say: "Have a hand-drawn mockup? A Figma screenshot? A system diagram? Show it to Claude. It understands the visual intent and can help implement it or improve the design."

What to show on screen: Show a design image or diagram in the Claude UI with Claude responding to it—either explaining what it sees or suggesting improvements.

Demo Plan

This is a hands-on demo showing the full workflow of multimodal interaction.

  1. Start the desktop app in Claude Code mode with a simple project
  2. Take a screenshot of something (error state, UI, or existing window) using the screenshot tool
  3. Drag the screenshot into the chat to attach it
  4. Ask Claude a question about the screenshot (e.g., "what's wrong with this error message?")
  5. Show Claude's response analyzing the visual content
  6. Drag a code or log file into the chat
  7. Ask Claude to analyze it (e.g., "why is this build failing?")
  8. Show multi-turn conversation where Claude references the attached file again without re-attachment
  9. Exit

This should take 2-3 minutes and demonstrate: - Drag-and-drop is intuitive and fast - Claude understands images and files immediately - Workflow is uninterrupted (no copy-pasting needed)

Code Examples & Commands

No code or commands for this video. Focus is entirely on UI and file handling.

File types Claude can understand: - Source code: .js, .py, .ts, .jsx, .tsx, .java, .go, .rust, etc. - Logs and output: .log, .txt, plain text - Configuration: .json, .yaml, .yml, .toml, .xml - Documents: .md, .pdf, .txt - Images: .png, .jpg, .jpeg, .gif, .webp - Structured: .csv, .sql, schemas

Gotchas & Tips

  • File size matters: Very large files (>10MB) may be partially uploaded. Prefer smaller, focused files
  • Screenshots are context: Take clean screenshots that highlight the issue. Avoid cluttered desktop backgrounds
  • PDF page ranges work best: Instead of attaching a 100-page doc, use @file.pdf#20-30 syntax to share only relevant pages
  • Images are analyzed, not edited: Claude can see and discuss images but can't modify them directly
  • Attachment history is preserved: In long sessions, old attachments stay in context. Use /clear to reset if needed
  • Permissions still apply: Attached files still go through the permission system if Claude wants to modify them

Lead-out

"Now that you know how to share files and images, let's talk about customizing the desktop app to match your workflow. In the next video, we'll explore settings—from picking the right AI model to fine-tuning how Claude behaves in your project."

Reference URLs

Prep Reading

  • Official VS Code & Desktop App UI docs to understand file handling
  • Best practices for sharing logs, screenshots, and code with Claude
  • Review multimodal capabilities mentioned in Feb 2026 release notes
  • Understand context preservation across file attachments in long sessions

Notes for Daniel: This video is about efficiency and capability. Show the drag-and-drop action smoothly and naturally. Emphasize how much faster this is than copy-pasting. The key insight is: Claude Code reduces friction between you and your tools. Make it feel magical, not technical.