# File Drop

> Dashed drop zone plus an upload list.

Component · Forms · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/FileDrop/)

Dashed drop zone plus an upload list. Click, Enter or drop to add files.

- `onFiles(files)` hands over the real `File` objects the person picked or dropped, after `accept` and `multiple`; upload them yourself. Dropped files that do not match `accept` go to `onReject`; say so with an inline Alert, not a toast.
- Progress is yours to report: control `files` (`{ id, name, size, progress, file }`) and set `progress` from your upload. Below 100 a row shows a progress bar and a cancel button, at 100 it reads "uploaded". With `onFiles` and no `files`, rows show only the size. `onRemove` tells you a file was removed or its upload cancelled.
- Without `onFiles` the list animates made-up progress, as a demo of the look (`simulateProgress` turns that on or off).
- The zone turns mint while a file is held over it, so people know the drop will land.
- Say what is accepted in the hint (types, size).

## Example

```tsx
import * as React from "react";
import { FileDrop } from "@twentyfirstmedia/pro";

function App() {
  const f = React.useState([
    {
      id: "a",
      name: "Receipt-April-Hetzner.pdf",
      size: 184320,
      progress: 100,
    },
    {
      id: "b",
      name: "Team-offsite-photos.zip",
      size: 24117248,
      progress: 46,
    },
  ]);
  return (
    <div className="tf-panel">
      <FileDrop
        files={f[0]}
        onChange={f[1]}
        hint="PDF, PNG or JPG up to 10 MB · drag several at once"
      />
    </div>
  );
}
export default App;
```

## Props

### FileDrop

| Prop | Type | Notes |
| --- | --- | --- |
| `files?` | `UploadFile[]` | The listed files (controlled); set `progress` per file to show real upload progress. |
| `onChange?` | `(f: UploadFile[]) => void` | The list changed: files added (with their `file`) or removed. |
| `onFiles?` | `(files: File[]) => void \| boolean \| File[]` | The person picked or dropped files: the real `File` objects, after `accept` and `multiple`. Upload them yourself. To show progress, control `files` and set each `progress`; an uncontrolled list shows them with their size only. Return `false` to list none of them, or the files to list (for example after checking their size). |
| `onReject?` | `(files: File[]) => void` | Dropped files that do not match `accept` (show an inline Alert). |
| `onRemove?` | `(f: UploadFile) => void` | A listed file was removed or its upload cancelled. |
| `simulateProgress?` | `boolean` | Animate made-up progress for added files, as a demo of the look. Default: on without `onFiles` (as before), off with it. |
| `title?` | `string` |  |
| `hint?` | `string` |  |
| `accept?` | `string` | Accepted types, as for `<input type="file">` ("image/*,.pdf"); also checked on drop. |
| `multiple?` | `boolean` |  |
| `disabled?` | `boolean` | No picking or dropping; the list stays visible. |
| `name?` | `string` | Takes part in a surrounding form under this name: the listed files are submitted with it. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |