Skip to main content
Version: v5 (beta)


The AttachmentPreviewList component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.

The following attachment types are supported:

  • Images - displayed inline
  • Video files - no preview provided inside the message input, but displayed inline inside the message list
  • Other files - no preview provided, users can download the uploaded files

Example 1 - attachment previews

Basic Usage

A typical use case for the AttachmentPreviewList component would be to use in your custom components that will completely override the message input component.

Example 1 - a basic example:

selector: "app-custom-message-input",
template: `
<!-- Other parts of the custom message input component -->
export class CustomMessageInputComponent {}

The AttachmentPreviewList uses the AttachmentService to display the attachment previews.


You can provide your own attachment preview list component by the CustomTemplatesService

Inputs and outputs


attachmentUploads$: undefined | Observable<AttachmentUpload<DefaultStreamChatGenerics>[]>

A stream that emits the current file uploads and their states

Defined in



Readonly retryAttachmentUpload: EventEmitter<File>

An output to notify the parent component if the user tries to retry a failed upload

Defined in



Readonly deleteAttachment: EventEmitter<AttachmentUpload<DefaultStreamChatGenerics>>

An output to notify the parent component if the user wants to delete a file

Defined in


Did you find this page helpful?