# 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

![Attachment Preview List Screenshot](https://getstream.io/docs-assets/images/63b8f78a56b8.png)

## 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:

```typescript
@Component({
  selector: "app-custom-message-input",
  template: `
    <stream-attachment-preview-list></stream-attachment-list>
    <!-- Other parts of the custom message input component -->
  `,
})
export class CustomMessageInputComponent {}
```

The `AttachmentPreviewList` uses the [`AttachmentService`](https://getstream.io/chat/docs/sdk/angular/v5/services/AttachmentService/) to display the attachment previews.

## Customization

You can provide your own attachment preview list component by the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/)

[//]: # "Start of generated content"

## Inputs and outputs

### attachmentUploads$

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

A stream that emits the current file uploads and their states

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L28)

---

### retryAttachmentUpload

`Readonly` **retryAttachmentUpload**: `EventEmitter<File>`

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

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L32)

---

### deleteAttachment

`Readonly` **deleteAttachment**: `EventEmitter<AttachmentUpload<DefaultStreamChatGenerics>>`

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

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L36)

[//]: # "End of generated content"


---

This page was last updated at 2026-08-07T20:37:38.953Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/AttachmentPreviewListComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/AttachmentPreviewListComponent/).