# FilePreviewPanel

Preview panel displaying file metadata, image/text preview, and download/delete actions

## FilePreviewPanel[​](#filepreviewpanel-1 "Direct link to FilePreviewPanel")

Preview panel displaying file metadata, image/text preview, and download/delete actions

**Source:** [`packages/appkit-ui/src/react/file-browser/file-preview-panel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/file-preview-panel.tsx)

### Props[​](#props "Direct link to Props")

| Prop              | Type                                                                                                                                                   | Required | Default | Description                                                               |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | ------------------------------------------------------------------------- |
| `selectedFile`    | `string \| null`                                                                                                                                       | ✓        | -       | Full path of the selected file (null when nothing is selected)            |
| `preview`         | `FilePreview \| null`                                                                                                                                  | ✓        | -       | Preview data for the selected file                                        |
| `previewLoading`  | `boolean`                                                                                                                                              |          | -       | Whether the preview is loading                                            |
| `onDownload`      | `((filePath: string) => void)`                                                                                                                         |          | -       | Called when the download button is clicked                                |
| `onDelete`        | `((filePath: string) => void)`                                                                                                                         |          | -       | Called when the delete button is clicked                                  |
| `deleting`        | `boolean`                                                                                                                                              |          | -       | Whether a delete operation is in progress                                 |
| `imagePreviewSrc` | `string \| ((filePath: string) => string)`                                                                                                             |          | -       | Image preview source — string URL or function that receives the file path |
| `formatSize`      | `((bytes: number) => string)`                                                                                                                          |          | -       | Custom file size formatter (defaults to formatFileSize)                   |
| `labels`          | `Pick<FileBrowserLabels, "type" \| "download" \| "size" \| "selectFilePrompt" \| "previewNotAvailable" \| "previewFailed" \| "modified" \| "unknown">` |          | -       | Customizable labels                                                       |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { FilePreviewPanel } from '@databricks/appkit-ui';

<FilePreviewPanel /* props */ />

```