Files Bubble - CometChat Docs

The CometChatFilesBubbleComponent renders the generic file attachment(s) of a CometChat.MediaMessage. It is the multi-attachment counterpart to CometChatFileBubble: the message list routes file messages to this bubble so that a single message carrying several files renders as one grouped bubble. Internally it delegates rendering to cometchat-file-bubble (expandable file list, download, caption) and only adds a shared batch width so every message in a multi-message batch lines up at the same size.

Overview

File cards — one card per file with name, size, and a download action (rendered by the underlying file bubble).
Collapsible list — when a message carries many files, the list collapses with an expand/collapse control.
Caption support — an optional caption is rendered below the files.
Batch-aware width — all bubbles in a batch share one width via the --cometchat-multi-attachment-width token (default 400px).

This bubble is selected only when enableMultipleAttachments is true (the default) on CometChatMessageBubble. When it is false, file messages fall back to the deprecated single-attachment CometChatFileBubble. The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.

Automatic Rendering

In the standard chat flow you do not instantiate this component yourself. CometChatMessageList renders CometChatMessageBubble, which routes any file-type message to CometChatFilesBubbleComponent when enableMultipleAttachments is on. Use the component directly only when you are building a fully custom message renderer.

Basic Usage

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatFilesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-file-message',
  standalone: true,
  imports: [CometChatFilesBubbleComponent],
  template: `
    <cometchat-files-bubble
      [message]="fileMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-files-bubble>
  `,
})
export class FileMessageComponent {
  fileMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Incoming vs Outgoing Messages

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatFilesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-file-list',
  standalone: true,
  imports: [CometChatFilesBubbleComponent],
  template: `
    <!-- Incoming files (left-aligned) -->
    <cometchat-files-bubble
      [message]="incoming"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-files-bubble>

    <!-- Outgoing files (right-aligned) -->
    <cometchat-files-bubble
      [message]="outgoing"
      [alignment]="MessageBubbleAlignment.right"
    ></cometchat-files-bubble>
  `,
})
export class FileListComponent {
  incoming!: CometChat.MediaMessage;
  outgoing!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Batch Grouping

When a user sends several media messages together, each message is stamped with a shared metadata.batchId. The message list groups consecutive messages that share a batchId and marks each one with isFirstInBatch / isLastInBatch flags, which control the avatar, spacing, and footer so the batch reads as a single visual block.

Angular expresses batch grouping as the two booleans isFirstInBatch / isLastInBatch (computed by CometChatMessageList). There is no batchPosition input on the bubble. All four media batch bubbles share one width through the --cometchat-multi-attachment-width CSS token.

Properties

Property	Type	Default	Description
`message`	`CometChat.MediaMessage`	required	The file message. Attachments and caption are read from it.
`alignment`	`MessageBubbleAlignment`	`MessageBubbleAlignment.left`	Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender.
`disableInteraction`	`boolean`	`false`	Accepted for parity with the other media batch bubbles. The file bubble has no interaction toggle, so this input has no visible effect.

This component emits no outputs.

Relationship to the Legacy File Bubble

	`CometChatFileBubble` (legacy)	`CometChatFilesBubble` (multi-attachment)
Routed by the list	Only when `enableMultipleAttachments` is `false`	Default for file messages
Multiple attachments	Rendered directly	Rendered via delegation, batch-aware width
Batch grouping	No	Yes (`isFirstInBatch` / `isLastInBatch`)
Availability	Deprecated standalone	Public standalone component

Customization

cometchat-files-bubble {
  /* Shared width for every media bubble in a batch (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}

--cometchat-multi-attachment-width is intentionally left unset in the kit’s css-variables.css; the batch bubbles fall back to 400px. Set it once to resize all four media batch bubbles — Images, Videos, Audios, and Files — together.

To restyle the file cards, use the File Bubble styling reference.

Technical Details

Standalone component — import and use independently; exported as CometChatFilesBubbleComponent from @cometchat/chat-uikit-angular.
Change detection — OnPush.
Delegation — renders through cometchat-file-bubble; adds only the shared batch width.
No outputs — the component emits no events.

File Bubble — the single-attachment bubble this component delegates to.
Images Bubble — the multi-attachment bubble for images.
Videos Bubble — the multi-attachment bubble for videos.
Message Composer — stages multiple attachments and sends them as a batch.
Message List — routes messages to this bubble and computes batch grouping.

​Overview

​Automatic Rendering

​Basic Usage

​Incoming vs Outgoing Messages

​Batch Grouping

​Properties

​Relationship to the Legacy File Bubble

​Customization

​Technical Details

​Related

Overview

Automatic Rendering

Basic Usage

Incoming vs Outgoing Messages

Batch Grouping

Properties

Relationship to the Legacy File Bubble

Customization

Technical Details

Related