# FileDropzone

> A place to drop files, or to choose them: a real file input with its label, so a click, Enter or Space opens the picker. It checks the type and the size and says the limit when a file is over it. There is no upload code: hand the files to yours and pass their progress back in items, which it lists with a Progress, a check when done, or the error. The checks are there to help the person; check the type and the size again on your server.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/file-dropzone

## Install

```bash
npx @entrepta/cli@latest add file-dropzone
```

Files: `primitives/file-dropzone.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`, `lib/icon.tsx`, `primitives/icon-tile.tsx`, `lib/motion.ts`, `primitives/progress.tsx`, `lib/format.ts`, `hooks/use-format.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`, `@radix-ui/react-slot`, `motion`.
Comes with: `button`, `icon-lib`, `icon-tile`, `motion-lib`, `progress`, `format-lib`, `use-format`.

## Usage

```tsx
import { FileDropzone } from "@/components/entrepta/file-dropzone"

<FileDropzone
  accept="image/*,.pdf"
  maxSize={5_000_000}
  multiple
  hint="PNG, JPG or PDF, up to 5 MB"
  onFiles={(files) => files.forEach(upload)}
  items={uploads}                  // { id, name, size, progress?, error? }[]
  onRemove={cancel}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onFiles` | `(files: File[]) => void` | - | The files that pass |
| `accept` | `string` | - | As the input takes it: "image/*,.pdf" |
| `maxSize` | `number` | - | Bytes; a file over it says the limit |
| `multiple` | `boolean` | false | Several at once |
| `items` | `{ id, name, size, progress?, error? }[]` | - | progress from 0 to 1 while it uploads |
| `onRemove` | `(id) => void` | - | A × on each file |
| `hint` | `ReactNode` | - | The line under the title |