# Image Attachments
URL: /concepts/message-threads/image-attachments

### Image attachments

Users can attach images to their messages through file picker, drag & drop, or clipboard paste.

## Using MessageInput with images

The `MessageInput` component provides built-in image attachment functionality:

```tsx
import {
  MessageInput,
  MessageInputTextarea,
  MessageInputFileButton,
  MessageInputSubmitButton,
  MessageInputStagedImages,
  MessageInputToolbar,
} from "@tambo-ai/react";

function ChatInterface() {
  return (
    <MessageInput contextKey="my-chat">
      <MessageInputStagedImages />
      <MessageInputTextarea placeholder="Type a message or attach images..." />
      <MessageInputToolbar>
        <MessageInputFileButton />
        <MessageInputSubmitButton />
      </MessageInputToolbar>
    </MessageInput>
  );
}
```

## Image input methods

* **File picker**: Click the file button to select images
* **Drag & drop**: Drag images directly onto the input area
* **Clipboard paste**: Use Ctrl+V (or Cmd+V) to paste images

## Custom image handling

Use the `useMessageImages` hook for custom image management:

```tsx
import { useMessageImages } from "@tambo-ai/react";

function CustomImageHandler() {
  const { images, addImages, removeImage, clearImages } = useMessageImages();

  const handleFileUpload = async (files: FileList) => {
    await addImages(Array.from(files));
  };

  return (
    <div>
      {images.map((image) => (
        <div key={image.id}>
          <img src={image.dataUrl} alt={image.name} />
          <button onClick={() => removeImage(image.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
}
```

Only image files are accepted. Non-image files will be rejected with an error.