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.

<Channel AttachmentUploadPreviewList={CustomAttachmentUploadPreviewList} />

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

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.

FileAttachmentUploadPreview

Customize the file attachment upload preview in MessageInput.

ImageAttachmentUploadPreview

Customize the image attachment upload preview in MessageInput.

VideoAttachmentUploadPreview

Customize the video attachment upload preview in MessageInput.