# FilePreviewPanel

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

## 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

| 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

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

```