> ## Documentation Index
> Fetch the complete documentation index at: https://docs.samplehc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Document Upload

> A screen template for uploading a PDF document

export const RegistryPreviewIframe = ({src}) => {
  const [isExpanded, setIsExpanded] = React.useState(false);
  const toggleExpanded = () => {
    setIsExpanded(!isExpanded);
  };
  const content = <>
    <div className="flex h-full w-full items-center justify-center bg-slate-100 text-slate-500">
      The preview only works while connected to the Sample VPN.
    </div>
    <iframe src={src} className="w-full h-full absolute top-0 left-0" style={{
    display: 'none'
  }} onLoad={e => e.target.style.display = 'block'} />
  </>;
  return <>
      {isExpanded && <div className="fixed inset-0 z-50 bg-black bg-opacity-70 flex items-center justify-center p-4" onClick={toggleExpanded}>
          <div className="relative w-full max-w-6xl h-full max-h-[90vh] bg-white rounded-lg shadow-xl overflow-hidden border-2" onClick={e => e.stopPropagation()}>
            <button onClick={toggleExpanded} className="absolute top-4 right-4 z-10 bg-white border border-gray-300 rounded-md p-2 hover:bg-gray-50 transition-colors shadow-sm" title="Exit fullscreen">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            {content}
          </div>
        </div>}

      {!isExpanded && <div className="relative w-full h-96 rounded-lg shadow-lg overflow-hidden border-2">
          <button onClick={toggleExpanded} className="absolute top-2 right-2 z-10 bg-white border border-gray-300 rounded-md p-2 hover:bg-gray-50 transition-colors" title="Enter fullscreen">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
            </svg>
          </button>

          {content}
        </div>}
    </>;
};

## Installation

Install the screen template by running the following command:

```bash theme={null}
npx shadcn add https://registry.samplehc.com/r/document-upload.json
```

The screen file will be added at `screens/document-upload-screen.tsx`.

## Usage

### Required Props

This screen template does not require any props. It handles document upload and returns the uploaded document information.

### Example

```python workflow.py theme={null}
from workflows_py.workflow import ScreenStep, Step, Workflow

workflow = Workflow(...)

workflow.then(
    ScreenStep(
        "document-upload",
        screen_path="./screens/document-upload-screen.tsx",
    )
).then(
    # Access the uploaded document in subsequent steps
    Step(
        "process-document",
        lambda ctx: process_document(ctx.get_step_result("document-upload")["document"]),
    )
)
```

### Returns

The screen returns the uploaded files directly:

| Name            | Type     | Description                                                             |
| --------------- | -------- | ----------------------------------------------------------------------- |
| `uploadedFiles` | `object` | The uploaded document files object containing file metadata and content |

### Preview

<RegistryPreviewIframe src="https://registry.samplehc.com/screens/document-upload" />