# Attachment Previews in Message Input

This section shows how to customize attachment previews in `MessageInput`. Previews are rendered by [`AttachmentPreviewList`](/chat/docs/sdk/react/v13/components/message-input-components/ui_components#attachmentpreviewlist/).

## Best Practices

- Override only the preview components you need for custom types.
- Use `UnsupportedAttachmentPreview` for custom attachment objects.
- Keep previews compact to avoid bloating the composer UI.
- Preserve default previews for standard types to reduce maintenance.
- Test link previews separately since they render outside `AttachmentPreviewList`.

## Customize the rendering of default attachment previews

The default attachment types recognized by `AttachmentPreviewList` are:

- `audio`
- `video`
- `image`
- `voiceRecording`
- `file`

If an attachment has `og_scrape_url` or `title_link`, it’s rendered by [`LinkPreviewList`](#linkpreviewlist-props) instead of `AttachmentPreviewList`.

`AttachmentPreviewList` also renders a preview of `message.shared_location` using `GeolocationPreview`.

To customize previews, override `AttachmentPreviewList`.

```tsx
import { VideoAttachmentPreview } from "./AttachmentPreviews";

const CustomAttachmentPreviewList = () => (
  <AttachmentPreviewList VideoAttachmentPreview={VideoAttachmentPreview} />
);
```

Then pass it to `Channel`.

```tsx
<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />
```

We can customize the following preview components:

- `AudioAttachmentPreview`
- `FileAttachmentPreview`
- `GeolocationPreview`
- `ImageAttachmentPreview`
- `UnsupportedAttachmentPreview`
- `VideoAttachmentPreview`
- `VoiceRecordingPreview`

## Customize the rendering of custom attachment previews

It is possible to add custom attachments (objects) to composed messages via [`upsertAttachments` function](/chat/docs/sdk/react/v13/components/contexts/message_input_context/#upsertattachments/) provided by `MessageInputContext`.

Custom attachments aren’t recognized by `AttachmentPreviewList`, so they render via `UnsupportedAttachmentPreview`. Customize that component to handle your custom attachment types.

```tsx
import { EventPreview } from "./EventAttachmentPreview";
import type { UnsupportedAttachmentPreviewProps } from "stream-chat-react";

const CustomAttachmentsPreview = (props: UnsupportedAttachmentPreviewProps) => {
  const { attachment } = props;
  if (attachment.type === "event") {
    return <EventPreview {...props} />;
  }
  // more conditions follow...
};
```

Then pass the custom component via `AttachmentPreviewList` to specify `UnsupportedAttachmentPreview`.

```tsx
import { CustomAttachmentsPreview } from "./AttachmentPreviewList";
const CustomAttachmentPreviewList = () => (
  <AttachmentPreviewList
    UnsupportedAttachmentPreview={CustomAttachmentsPreview}
  />
);
```

```tsx
<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />
```


---

This page was last updated at 2026-04-21T07:55:47.899Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/message-input/attachment_previews/](https://getstream.io/chat/docs/sdk/react/v13/guides/message-input/attachment_previews/).