---
id: attachment_previews
title: 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](../../../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](../../../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} />
```
