# File Dropzone
URL: https://remocn.dev/docs/product-scenes/file-dropzone

Files drop into an upload dialog, progress bars fill, and an upload toast confirms the destination.

- Install: `npx shadcn@latest add @remocn/file-dropzone`
- Vibe: clean
- Natural length: 151f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/file-dropzone
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FileDropzone } from "@/components/remocn/file-dropzone";

const FileDropzoneScene = () => (
  <FileDropzone
    title="Upload files"
    destination="Research"
    files={[{ name: "Q3-board-deck.pdf", size: 4200000 }, { name: "customers.csv", size: 640000 }]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="FileDropzone"
    component={FileDropzoneScene}
    durationInFrames={195}
    fps={30}
    width={1280}
    height={720}
  />
);
```

An upload modal opens over an app window; file cards drop into the dropzone, rows appear with progress bars that finish at different times, then Upload is clicked and the files land in the table behind with a confirming toast. Pass `files` (name, size in bytes, optional type), `title` and `destination`. Pass `image` for the preview of image files; the default image only exists in the Remocn repo. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `files` | `DropFile[]` | `DEFAULT_FILES` | Up to three files: name, size in bytes, optional type |
| `title` | `string` | `"Upload files"` | Modal title |
| `destination` | `string` | `"Research"` | Where files go; shown in the window, rows and toast |
| `image` | `string` | `staticFile("reel/reel-2.jpg")` | Preview for image files; default exists only in the Remocn repo |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A document, knowledge-base or asset-management launch where upload is the first action.
- A beat showing several file types arriving with believable progress.
- A confirmation moment: files appear in the list and a toast confirms.

## Don't use when
- You want one file card filling an upload bar on a plain stage — use `drop-upload`.
- Files go into a prompt box as chips — use `multi-file-drop`.
- You want a table with filtering rather than uploads — use `table-filter`.