New to Kendo UI for AngularStart a free 30-day trial

Angular Chat Attachments

The Chat component supports comprehensive message file attachments functionality, allowing users to easily attach files, images, text attachments, or other data to their messages and interact with received attachments.

This guide covers how to enable file selection, add file attachments to messages, and customize file actions in the Chat.

Message Attachments

Messages in the Chat can contain various attachment files like PDF documents, Word files, images, and more. By default, the component provides a download action for all attached files, but the available actions can be customized as needed.

The following example demonstrates the Chat message attachments and their actions.

Change Theme
Theme
Loading ...

To add attachments to a message, set the files property to an array of ChatFile objects:

ts
public messages: Message[] = [
    {
        id: guid(),
        text: 'Here are the documents you requested',
        files: [
            {
                name: 'document.pdf',
                size: 245760,
                extension: 'pdf',
                url: 'https://example.com/document.pdf'
            },
        ]
    }
];

You can customize the available file actions by setting the fileActions property to a FileAction array. The download option is the default one that comes with the component. But you can define additional actions as needed.

ts
public fileActions: FileAction[] = [
    { id: 'download', label: 'Download', svgIcon: downloadIcon },
    { id: 'share', label: 'Share', svgIcon: shareIcon },
    { id: 'delete', label: 'Delete', svgIcon: trashIcon }
];

When users interact with file actions, the Chat emits the following events which you need to handle to process the selected action manually.

Custom Attachments

In addition to file attachments, messages can include other types of attachments. In combination with AttachmentTemplate you can show text, images, videos, and rich media. These attachments are handled similarly to file attachments but support additional features like inline previews.

Use the attachments property to display the custom attachments within the message content.

The following example demonstrate text custom attachments.

Change Theme
Theme
Loading ...

Disabling File Selection

The Chat component provides built-in file selection capabilities that allow users to attach single or multiple files to their messages before sending them.

To disable file selection, set the enableFileSelect input to false.

html
<kendo-chat [enableFileSelect]="false"></kendo-chat>