# File Attachment Panel
URL: /docs/web/components/file-attachment-panel

File Attachment Panel component.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { FileAttachmentPanel } from '@docyrus/ui/components/file-attachment-panel';
import { Button } from '@docyrus/ui/primitives/ui/button';
import { cn } from '@docyrus/ui/primitives/lib/utils';

import { PropControls } from '@/components/prop-controls';
import { useDemoData } from '@/data/file-attachment-panel-data';

export function FileAttachmentPanelDemo() {
  const { props, controls, actions } = useDemoData();
  const [open, setOpen] = useState(false);

  return (
    <div className="w-full">
      <div className="mb-3 flex justify-end">
        <button
          type="button"
          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
          onClick={() => setOpen(prev => !prev)}>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
          Configure
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn('transition-transform duration-200', open && 'rotate-180')}><path d="m6 9 6 6 6-6" /></svg>
        </button>
      </div>
      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-in-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
        )}>
        <div className="overflow-hidden">
          <div className="mb-4 rounded-lg border border-border bg-muted/30 p-4 grid gap-6">
            
            <div className="mt-3 flex flex-wrap gap-2">
              
              
              
              
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-file-attachment-panel
```

## Usage

```tsx
import { FileAttachmentPanel } from "@docyrus/ui/components/file-attachment-panel";
import type { FileAttachmentPanelProps } from "@docyrus/ui/components/file-attachment-panel";

const files: FileAttachmentPanelProps['files'] = [
  {
    id: "f-1",
    file_name: "design-review.png",
    file_type: "image/png",
    file_size: 120000,
    signed_url: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?w=640&q=80",
    source: "local",
    file_data: null,
    created_on: new Date().toISOString(),
    record_id: "rec-1"
  }
];

function Demo() {
  return (
    <FileAttachmentPanel
      files={files}
      onUploadFile={(file) => Promise.resolve({
        ...files[0],
        id: crypto.randomUUID(),
        file_name: file.name,
        file_type: file.type,
        file_size: file.size,
        signed_url: URL.createObjectURL(file)
      })}
      onDeleteFile={(id) => console.log("delete", id)}
    />
  );
}
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `files` | `DocyrusFile[]` | — |
| `title` | `string` | `"Attachments"` |
| `editable` | `boolean` | `true` |
| `isLoading` | `boolean` | `false` |
| `maxFileSize` | `number` | `50 * 1024 * 1024` |
| `accept` | `string` | — |
| `maxFiles` | `number` | — |
| `onUploadFile` | `(file: File) => Promise<DocyrusFile>` | — |
| `onDeleteFile` | `(fileId: string) => void \| Promise<void>` | — |
| `onInsertExternalFiles` | `(files: ExternalFilePayload[]) => void \| Promise<void>` | — |
| `onFileOpen` | `(file: DocyrusFile) => void` | — |
| `isDeletePending` | `boolean` | `false` |
| `className` | `string` | — |
| `oneDriveConfig` | `OneDrivePickerConfig` | — |
| `googleDriveConfig` | `GoogleDrivePickerConfig` | — |

## Components

| Component | Description |
|-----------|-------------|
| `FileAttachmentPanel` | Public export |
| `FileEmptyState` | Internal — `file-empty-state.tsx` |
| `FileGrid` | Internal — `file-grid.tsx` |
| `FileItem` | Internal — `file-item.tsx` |
| `FileList` | Internal — `file-list.tsx` |
| `FileSourceMenu` | Internal — `file-source-menu.tsx` |
| `FileUploadProgress` | Internal — `file-upload-progress.tsx` |
| `FileUploadZone` | Internal — `file-upload-zone.tsx` |
| `DocyrusIcon` | Internal — `docyrus-icon.tsx` |

## Type Exports

| Type | Description |
|------|-------------|
| `FileAttachmentPanelProps` | — |
| `ViewMode` | — |
| `DocyrusFile` | — |
| `ExternalFilePayload` | — |
| `OneDrivePickerConfig` | Config for OneDrive integration |
| `GoogleDrivePickerConfig` | Config for Google Drive integration |

## Type Reference

### ViewMode

`"list"` | `"grid"`

### DocyrusFile

| Field | Type |
|-------|------|
| `id` | `string` |
| `file_name` | `string` |
| `file_type` | `string` |
| `file_size` | `number` |
| `signed_url` | `string \| null` |
| `source` | `"local" \| "microsoft_onedrive" \| "google_drive"` |
| `file_data` | `Record<string, unknown> \| null` |
| `created_on` | `string` |
| `record_id` | `string \| null` |

### ExternalFilePayload

| Field | Type |
|-------|------|
| `source` | `"microsoft_onedrive" \| "google_drive"` |
| `file_name` | `string` |
| `file_type` | `string` |
| `signed_url` | `string` |
| `file_data` | `Record<string, unknown> \| undefined` |
| `expire_in` | `number \| undefined` |

### OneDrivePickerConfig

| Field | Type | Description |
|-------|------|-------------|
| `clientId` | `string` | Microsoft OAuth2 Client ID |
| `redirectUri` | `string \| undefined` | OAuth2 redirect URI (defaults to `window.location.origin`) |

### GoogleDrivePickerConfig

| Field | Type | Description |
|-------|------|-------------|
| `clientId` | `string` | Google OAuth2 Client ID |
| `apiKey` | `string` | Google API key for the Picker API |
| `appId` | `string \| undefined` | Google Cloud project / app ID |