> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# File Bubble

> A batch-aware bubble that renders one or more generic file attachments with file-type icons, metadata, download, and a collapsible list.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatFilesBubble` |
  | Since | 7.1.0 |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatFilesBubble } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-files-bubble` |
  | Primary output | None — renders from the SDK message |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching | None — self-extracting from the SDK message |
  | Full props | See [Props](#props) |
</Accordion>

## Overview

`CometChatFilesBubble` renders generic file attachment(s) as stacked file cards. It is **self-extracting**: pass the SDK `message` and the bubble derives the file attachments and caption itself. The message list uses it automatically for file messages.

Key capabilities:

* **Stacked file cards** — one card per file with type icon, filename, extension label, and file size
* **File-type icons** — recognizes PDF, Word, Excel, PowerPoint, text, zip, audio, video, and image extensions
* **Collapsible list** — shows up to 3 files initially, with a "+N more" toggle to expand
* **Download button** — download individual files
* **Batch grouping** — rendered as one connected group when several media messages are sent together (handled by the [message list](/ui-kit/react/components/message-list#multi-attachment-batch-grouping))
* **Caption support** — optional caption rendered below the cards

<Info>
  **Live Preview** — interact with the file bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-files--two-files)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-files--two-files&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "500px", border: "1px solid #e0e0e0"}} title="CometChat File Bubble — Two Files" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatFilesBubble } from "@cometchat/chat-uikit-react";

function FileMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatFilesBubble message={message} />;
}
```

***

## File Card Layout

Each attachment renders as a card with:

| Element | Description |
| - | - |
| File-type icon | Color-coded icon based on file extension |
| Filename | Display name of the file |
| Meta label | Extension (uppercase) and human-readable file size |
| Download button | Downloads the file |

When a message has more than 3 file attachments, the list is initially collapsed with a toggle showing "+N more". Clicking the toggle expands to show all files.

### Supported File-Type Icons

| Icon | Extensions |
| - | - |
| PDF | `pdf` |
| Word | `doc`, `docx` |
| Excel | `xls`, `xlsx`, `csv` |
| PowerPoint | `ppt`, `pptx` |
| Text | `txt`, `rtf` |
| Archive | `zip`, `rar`, `7z`, `gz` |
| Audio | `mp3`, `wav`, `m4a`, `aac`, `ogg` |
| Video | `mov`, `mp4`, `avi`, `mkv` |
| Image | `jpg`, `jpeg`, `png`, `gif`, `webp`, `bmp`, `svg`, `heic`, `heif` |
| Unsupported | All other extensions |

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-files--five-files-expand-collapse&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat File Bubble — Five Files Expand" allow="clipboard-write" />

***

## Props

### message

The file message. The bubble extracts its attachments and caption from it. **Required.**

| | |
| - | - |
| Type | `CometChat.MediaMessage` |
| Required | Yes |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

| | |
| - | - |
| Type | `"left" \| "right"` |
| Default | derived |

***

### textFormatters

Text formatters applied to the caption (mentions, URLs).

| | |
| - | - |
| Type | `CometChatTextFormatter[]` |
| Default | `undefined` |

***

### className

Additional CSS class applied to the root element.

| | |
| - | - |
| Type | `string` |
| Default | `undefined` |

***

## CSS Selectors

| Target | Selector |
| - | - |
| Root | `.cometchat-files-bubble` |
| Incoming variant | `.cometchat-files-bubble--incoming` |
| Outgoing variant | `.cometchat-files-bubble--outgoing` |
| Container | `.cometchat-files-bubble__container` |
| Multi-card container | `.cometchat-files-bubble__container--multi` |
| File card | `.cometchat-files-bubble__card` |
| File-type icon wrapper | `.cometchat-files-bubble__card-icon` |
| File-type icon image | `.cometchat-files-bubble__card-icon-img` |
| Card text area | `.cometchat-files-bubble__card-text` |
| Filename | `.cometchat-files-bubble__card-name` |
| Meta (extension + size) | `.cometchat-files-bubble__card-meta` |
| Expand/collapse toggle | `.cometchat-files-bubble__toggle` |
| Caption | `.cometchat-files-bubble__caption` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Image Bubble" icon="image" href="/ui-kit/react/components/image-bubble">
    Batch-aware image bubble with grid layouts
  </Card>

  <Card title="Audio Bubble" icon="music" href="/ui-kit/react/components/audio-bubble">
    Batch-aware audio bubble with player cards
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
    Multi-attachment batch grouping in the list
  </Card>

  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/components/message-composer">
    Multi-attachment staging tray
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.