Loading...
Image Attachments
Add image attachment support to message threads
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:
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:
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.