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

# File Plugin

> Renders file messages with file icon, name, size, and download button.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `file`                                                                              |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `file`                                                                              |
  | Message Categories   | `message`                                                                           |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatFileBubble`                                                               |
  | Conversation Preview | File                                                                                |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The File plugin handles messages of type `file` in category `message`. It renders a file card showing the file name, size, extension icon, and a download button with progress indicator.

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

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

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

***

## Bubble Rendering

* **File card** — displays file icon (based on extension), file name, and formatted file size
* **Download button** — click to download with progress indicator (uses `downloadWithProgress` utility)
* **Multiple files** — expand/collapse list showing all attachments
* **Caption** — rendered below the file card, formatted with text formatters
* **Pending state** — shows file info from local metadata while uploading (no download button)

***

## Context Menu Options

Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately).

***

## Conversation Preview

Returns: `File` (localized via `conversation_subtitle_file` key)

***

## CSS Selectors

| Target          | Selector                           |
| --------------- | ---------------------------------- |
| Bubble root     | `.cometchat-file-bubble`           |
| File card       | `.cometchat-file-bubble__card`     |
| File icon       | `.cometchat-file-bubble__icon`     |
| File name       | `.cometchat-file-bubble__name`     |
| File size       | `.cometchat-file-bubble__size`     |
| Download button | `.cometchat-file-bubble__download` |
| Caption         | `.cometchat-file-bubble__caption`  |