AttachmentPreviewListComponent

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:

@Component({
  selector: "app-custom-message-input",
  template: `
    <stream-attachment-preview-list
      [attachmentUploads$]="attachmentService.attachmentUploads$"
      (retryAttachmentUpload)="attachmentService.retryAttachmentUpload($event)"
      (deleteAttachment)="attachmentService.deleteAttachment($event)"
    ></stream-attachment-preview-list>
    <!-- Other parts of the custom message input component -->
  `,
  providers: [AttachmentService],
})
export class CustomMessageInputComponent {
  constructor(readonly attachmentService: AttachmentService) {}
}

The AttachmentPreviewList displays the uploads emitted by its attachmentUploads$ input, and the custom attachments of the AttachmentService. The built-in message input component connects the inputs and outputs to its own AttachmentService instance.

AttachmentPreviewListComponent

Basic Usage

Customization

Inputs and outputs

attachmentUploads$

Defined in

retryAttachmentUpload

Defined in

deleteAttachment

Defined in

Ask AI