# AttachmentPreviewListComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

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
      [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`](https://getstream.io/chat/docs/sdk/angular/v8/services/AttachmentService/). The built-in message input component connects the inputs and outputs to its own `AttachmentService` instance.

## Customization

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

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

## Inputs and outputs

### attachmentUploads$

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

A stream that emits the current file uploads and their states

#### Defined in

[lib/attachment-preview-list/attachment-preview-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

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

---

### deleteAttachment

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

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

#### Defined in

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

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

---

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