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

# File Bubble

> File Bubble — CometChat documentation.

`CometChatFileBubble` is the content view for a [MediaMessage](/sdk/flutter/send-message#media-message) if the media sent is a file.

## Properties

| Properties       | Type                                                              | Description                                        |
| ---------------- | ----------------------------------------------------------------- | -------------------------------------------------- |
| **fileUrl**      | String                                                            | the path of the image to display                   |
| **fileMimeType** | String                                                            | the mime type of the file                          |
| **id**           | int                                                               | id to make file name unique                        |
| **title**        | String                                                            | a text to display as name of the file              |
| **subtitle**     | String                                                            | a text to display below the name of the file       |
| **downloadIcon** | Icon                                                              | customize the icon to display to download the file |
| **style**        | [FileBubbleStyle](/ui-kit/flutter/v4/file-bubble#filebubblestyle) | used to customize appearance of this widget        |
| **theme**        | [CometChatTheme](/ui-kit/flutter/v4/theme)                        | used to set custom theme                           |

***

## FileBubbleStyle

FileBubbleStyle is the class containing attributes to customize appearance of this widget.

| Properties           | Type      | Description                                              |
| -------------------- | --------- | -------------------------------------------------------- |
| **titleStyle**       | TextStyle | used to set style of the name of the file                |
| **subtitleStyle**    | TextStyle | used to set style of the text below the name of the file |
| **downloadIconTint** | Color     | used to provide color to the download icon               |
| **height**           | double    | used to set height                                       |
| **width**            | double    | used to set width                                        |
| **background**       | Color     | used to set background color                             |
| **gradient**         | Gradient  | used to set a gradient background                        |
| **border**           | BoxBorder | used to set border                                       |
| **borderRadius**     | double    | used to set border radius                                |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatFileBubble(
        theme: cometChatTheme,
        fileUrl: 'https://images.pexels.com/photos/1496372/pexels-photo-1496372.jpeg',
        title: 'File bubble',
        style: const FileBubbleStyle(borderRadius: 6),
    )
    ```
  </Tab>
</Tabs>