# Attachment Previews in Message Input

In this section we will focus on how to customize attachment previews display in `MessageInput` component. The attachment previews are rendered by [`AttachmentPreviewList` component](/chat/docs/sdk/react/v12/components/message-input-components/ui-components#attachmentpreviewlist/).

## Customize the rendering of default attachment previews

The default attachment types recognized by `AttachmentPreviewList` are:

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

If the attachment object has property `og_scrape_url` or `title_link`, then it is rendered by [`LinkPreviewList` component](#linkpreviewlist-props) and not `AttachmentPreviewList`.

To customize attachment previews we need to override `AttachmentsPreviewList` component.

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

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

And pass it to `Channel` component.

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

We can customize the following preview components:

- `AudioAttachmentPreview`
- `FileAttachmentPreview`
- `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/v12/components/contexts/message-input-context/#upsertattachments/) provided by `MessageInputContext`.

The custom attachments are not recognized by `AttachmentPreviewList` component and therefore rendered via `UnsupportedAttachmentPreview` component within `AttachmentPreviewList`. The component `UnsupportedAttachmentPreview` can be customized and handle all the custom attachment objects added to the message attachments.

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

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

The custom component is then passed to custom `AttachmentsPreviewList` component which purpose is just to specify the custom `UnsupportedAttachmentPreview` component.

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

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


---

This page was last updated at 2026-05-22T16:32:11.897Z.

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