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

> Learn to use Claudian's vision support with drag-drop, paste, and image paths. Effortlessly attach images to Claude for multimodal conversations. Works with YishenTu/claudian.

- Repository: [YishenTu/claudian](https://github.com/YishenTu/claudian)
- Tags: how-to-guide
- Published: 2026-03-17

---

**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`](https://github.com/YishenTu/claudian/blob/main/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`.

```typescript
// 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.

```typescript
// 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`](https://github.com/YishenTu/claudian/blob/main/src/utils/imageEmbed.ts) module resolves the path using `app.vault.getAbstractFileByPath()`, while [`src/utils/sdkSession.ts`](https://github.com/YishenTu/claudian/blob/main/src/utils/sdkSession.ts) handles the final base64 conversion before transmission.

```typescript
// 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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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`](https://github.com/YishenTu/claudian/blob/main/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.