AttachmentUploadPreviewList

AttachmentUploadPreviewList is the default UI component for rendering a preview of uploaded files and images within MessageInput component.

You can replace this default UI component using the AttachmentUploadPreviewList prop on Channel component.

<Channel AttachmentUploadPreviewList={CustomAttachmentUploadPreviewList} />

Under the hood, it uses the MessageComposer API from the stream-chat to show the image attachment upload preview.

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

Component prop used to customize the audio attachment upload preview when its uploading/uploaded in the MessageInput.

FileAttachmentUploadPreview

Component prop used to customize the file attachment upload preview when its uploading/uploaded in the MessageInput.

ImageAttachmentUploadPreview

Component prop used to customize the image attachment upload preview when its uploading/uploaded in the MessageInput.

VideoAttachmentUploadPreview

Component prop used to customize the video attachment upload preview when its uploading/uploaded in the MessageInput.