How to Use Vision Support with Drag-Drop, Paste, and Image Path in Claudian

Claudian enables multimodal conversations with Claude by supporting three image attachment methods—drag-and-drop, clipboard paste, and vault-relative paths—each converting images to base64 data URLs before transmission.

Claudian is an Obsidian plugin that bridges your vault with Anthropic’s Claude AI. Its vision support with drag-drop, paste, and image path capabilities allow you to analyze screenshots, diagrams, and photos directly within chat contexts without leaving your note-taking environment.

Three Ways to Attach Images

Drag-and-Drop Files onto the Chat Input

In src/features/chat/ui/ImageContext.ts, the setupDragAndDrop() method initializes listeners for the chat input wrapper. When you drop one or more image files, handleDrop() processes the event and calls addImageFromFile() to create an ImageAttachment.

// Drop a PNG onto the chat input area
await manager.handleDrop(event); 
// Internally triggers: addImageFromFile(file, 'drop')

Paste Images from the Clipboard

The setupPasteHandler() method in the same file registers a clipboard listener. When you press Ctrl + V (or Cmd + V) after copying a screenshot, the handler extracts image items and routes them through the same addImageFromFile() pipeline.

// Register the paste listener once during initialization
await manager.setupPasteHandler();

// When triggered by Ctrl+V, automatically executes:
// await manager.addImageFromFile(file, 'paste');

Type Vault-Relative Image Paths

For existing vault assets, type a path relative to your vault root. The src/utils/imageEmbed.ts module resolves the path using app.vault.getAbstractFileByPath(), while src/utils/sdkSession.ts handles the final base64 conversion before transmission.

// Type "![[my-photo.png]]" in the chat input
const file = app.vault.getAbstractFileByPath('my-photo.png');
const base64 = await readFileAsBase64(file);
const attachment = {
  id: genId(),
  name: file.name,
  mediaType: 'image/png',
  data: base64,
  size: file.stat.size,
  source: 'file'
};

Shared Image Processing Pipeline

All three input methods converge on a unified validation and conversion workflow defined in ImageContext.ts.

Validation Constraints

Before conversion, images must satisfy two criteria defined in the source:

• Size limit: Files must be ≤ 5 MiB (MAX_IMAGE_SIZE)
• Format support: Extensions must map to supported media types (IMAGE_EXTENSIONS)

Base64 Conversion

The fileToBase64() utility reads the file into an ArrayBuffer and encodes it as a base64 string. This data populates an ImageAttachment object containing the media type, file size, and source method ('drop', 'paste', or 'file').

State Synchronization

After conversion, the attachment joins ImageContextManager.attachedImages. The updateImagePreview() method renders thumbnails above the input field, while onImagesChanged callbacks notify the chat controller of state updates.

Transmitting Images to Claude

When you send the message, src/utils/sdkSession.ts extracts the images array from the UI state. The base64 payloads are injected directly into the Claude API request, enabling multimodal context without external hosting.

Rendering Image Attachments in Chat

Once transmitted, src/features/chat/rendering/MessageRenderer.ts displays attached images above your chat bubble via renderMessageImages(). Clicking a thumbnail triggers showFullImage(), opening a full-screen modal for detailed inspection.

Summary

• Drag-and-drop, clipboard paste, and vault-relative paths provide flexible image input methods in Claudian.
• All methods share the addImageFromFile() implementation in src/features/chat/ui/ImageContext.ts for consistent validation and conversion.
• Images must be ≤ 5 MiB and match supported extensions defined in IMAGE_EXTENSIONS.
• The fileToBase64() utility converts files to data URLs stored in ImageAttachment objects.
• MessageRenderer.ts handles thumbnail previews and full-screen modal viewing.

Frequently Asked Questions

What image formats does Claudian support for vision input?

Claudian validates images against the IMAGE_EXTENSIONS mapping in ImageContext.ts. While the specific extensions aren't enumerated in the public API, the plugin accepts standard web formats including PNG, JPEG, GIF, and WebP, converting all valid files to base64 data URLs before transmission.

Is there a file size limit for attached images?

Yes. Claudian enforces a strict 5 MiB maximum file size through the MAX_IMAGE_SIZE constant. Files exceeding this limit are rejected during the validation phase before base64 conversion occurs, preventing memory issues and API payload errors.

Can I attach multiple images simultaneously?

Absolutely. The handleDrop() method in ImageContext.ts iterates over all files in the drop event, processing each through addImageFromFile(). Similarly, clipboard operations can carry multiple image items. Each attachment receives a unique ID and appears as a separate thumbnail in the preview area.

How does Claudian handle invalid image paths?

When typing a vault-relative path like ![[missing.png]], the resolution logic in src/utils/imageEmbed.ts attempts to locate the file via app.vault.getAbstractFileByPath(). If the path doesn't resolve to a valid file, the attachment process halts before creating an ImageAttachment, and the reference won't appear in the transmitted message payload.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}