# antuikit / Upload

> Upload with every file list glyph drawn from the active icon pack, at the size and color each slot has by default.

Docs: https://antuikit.com/docs/components/upload

## Install

npx antuikit@latest init
npx antuikit@latest add upload

## Import

import { Upload } from "@/components/ui/upload";

## Demos

- [Basic](https://ui.antuikit.com/embed/upload/basic.md): Wrap a button in `Upload` to open the file picker, and each chosen file appears in a list below it while it uploads.
- [Default file list](https://ui.antuikit.com/embed/upload/default-file-list.md): Pass `defaultFileList` to start with files already listed, each showing its status: done, uploading or failed.
- [Picture list](https://ui.antuikit.com/embed/upload/picture-list.md): Set `listType="picture"` to show a thumbnail beside each file name, for images like a cover or a banner.
- [Picture card](https://ui.antuikit.com/embed/upload/picture-card.md): Set `listType="picture-card"` for a grid of image tiles with an add tile at the end, and preview a tile with `onPreview`.
- [Picture circle](https://ui.antuikit.com/embed/upload/picture-circle.md): Set `listType="picture-circle"` for round image tiles, like the profile photos of a team.
- [Drag and drop](https://ui.antuikit.com/embed/upload/drag.md): Use `Upload.Dragger` for a drop zone that takes files dragged onto it as well as clicks, one file or many.
- [Directory](https://ui.antuikit.com/embed/upload/directory.md): Set `directory` to pick a whole folder, and every file inside it is added to the list.
- [Max count](https://ui.antuikit.com/embed/upload/max-count.md): Set `maxCount={1}` to keep a single file, so a new pick replaces the old one instead of being rejected.
- [Hide when full](https://ui.antuikit.com/embed/upload/hide-when-full.md): Set `maxCount` with `multiple` and hide the trigger once the list holds that many files, here three.
- [Paste](https://ui.antuikit.com/embed/upload/paste.md): Set `pastable` to add an image from the clipboard when the reader pastes it with a keyboard shortcut.
- [Manual upload](https://ui.antuikit.com/embed/upload/manual.md): Return `false` from `beforeUpload` to collect files without sending them, then upload the whole list with a button.
- [PNG only](https://ui.antuikit.com/embed/upload/png-only.md): Return `Upload.LIST_IGNORE` from `beforeUpload` to reject a file before it reaches the list, here anything that is not a PNG.
- [Custom list actions](https://ui.antuikit.com/embed/upload/custom-list.md): Pass `showUploadList` an object to choose which actions each file shows and to add `extra` text, like a status beside the name.
- [Avatar uploader](https://ui.antuikit.com/embed/upload/avatar-uploader.md): A round upload that checks the file type and size in `beforeUpload` and shows the chosen image as an Avatar inside a ring.
- [Attachments](https://ui.antuikit.com/embed/upload/attachments.md): An attachments card with a drop zone, a progress bar per file, a remove button and the total size of everything attached.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/upload`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Upload` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.