New to Kendo UI for Angular? Start a free 30-day trial

Angular Chat Attachments

Updated on Dec 8, 2025

The Chat component lets users attach files, images, text attachments, or other data to their messages and interact with any received attachments.

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

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. You can customize the available actions as needed.

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

Change Theme

Theme

Loading ...

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

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 extra actions as needed.

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. Handle these events to process the selected action manually.

fileActionClick—Fires when you click a file action. Returns a FileActionEvent object.
download—Fires specifically for download actions. Returns a FileDownloadEvent object.

Disabling File Attachments

To disable file selection, set the enableFileSelect input to false. When you disable file selection, users cannot select new files. However, messages can still display file attachments that you add programmatically or that come from other sources.

html

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

Embedding Other Attachment Types

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. The component handles these attachments similarly to file attachments but supports extra features like inline previews.

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

The following example demonstrates custom text attachments.