# AttachmentUploadPreviewList

`AttachmentUploadPreviewList` is the default UI for previewing uploads inside `MessageInput`.

## Best Practices

- Use `MessageComposer` state to drive previews instead of duplicating upload state.
- Filter attachments by type only when you need specialized UI.
- Keep preview components lightweight to avoid slowing input typing.
- Provide clear affordances for cancel/remove actions.
- Override subcomponents for per-type customization instead of rewriting the list.

Replace it via the `AttachmentUploadPreviewList` prop on [Channel](/chat/docs/sdk/react-native/v8/core-components/channel/).

```tsx
<Channel AttachmentUploadPreviewList={CustomAttachmentUploadPreviewList} />
```

It uses the `stream-chat` `MessageComposer` API to show upload previews.

```tsx
import { isLocalImageAttachment } from "stream-chat";
import { useAttachmentManagerState } from "stream-chat-react-native";

const { attachments } = useAttachmentManagerState();

// Only show image attachments
const imageUploads = attachments.filter((attachment) =>
  isLocalImageAttachment(attachment),
);

// Show all other file attachments
const fileUploads = attachments.filter(
  (attachment) => !isLocalImageAttachment(attachment),
);
```

## Props

### AudioAttachmentUploadPreview

Customize the audio attachment upload preview in `MessageInput`.

| Type          | Default                                                                                                                                                                                                   |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`AudioAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx) |

### FileAttachmentUploadPreview

Customize the file attachment upload preview in `MessageInput`.

| Type          | Default                                                                                                                                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx) |

### ImageAttachmentUploadPreview

Customize the image attachment upload preview in `MessageInput`.

| Type          | Default                                                                                                                                                                                                   |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ImageAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx) |

### VideoAttachmentUploadPreview

Customize the video attachment upload preview in `MessageInput`.

| Type          | Default                                                                                                                                                                                                   |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`VideoAttachmentUploadPreview`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx) |


---

This page was last updated at 2026-04-17T17:33:44.590Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/attachment-upload-preview-list/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/attachment-upload-preview-list/).