antuikit's Upload is Ant Design's Upload and its Dragger, installed into your project as a file you own. It takes the same props. The kit draws the file list glyphs from your icon pack: the three row actions through showUploadList, and the leading glyph (a spinner while uploading, a file on picture lists, a paperclip on text lists) through iconRender. Those are the two rows marked antuikit in the API table. The trigger's icon is yours, because the trigger is your children.
Install
npx antuikit@latest init
npx antuikit@latest add upload
The first command sets up AntuikitProvider and the theme tokens, and the second adds this component.
Import
From @/components/ui/upload, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Upload } from "@/components/ui/upload"
The axes
Two enumerated props. They match the Figma properties on the Design tab.
type takes select (the default) and drag. You rarely set it, since Upload.Dragger sets it for you.
listType takes text (the default), picture, picture-card and picture-circle. On the two card types it changes the trigger too: your children render inside a dashed tile, where a plus glyph over a short label fits best.
The list glyphs are colored by listType: muted in a row, white over a picture card's hover overlay.
Flags
Seven booleans. Two of them have defaults you might not expect.
disabled (false) blocks the trigger and strips its event handlers. It also inherits from a surrounding Form or ConfigProvider, so a disabled form disables the field without anyone passing the prop.
multiple (false) only widens the OS dialog. It is not a cap, and maxCount is not a dialog setting. They are independent.
directory (false) swaps the dialog for a folder picker and adds every file inside. Those files are checked against accept, since a folder brings everything in it.
pastable (false) adds an image pasted anywhere on the page, whatever has focus. Nothing on screen shows it, so say it in the hint line.
openFileDialogOnClick (true) opens the picker on click. Turn it off and the Upload is a drop target only.
hasControlInside defaults to true: your children already contain a control, so the Upload element gets no role or tabIndex of its own. Upload.Dragger sets it to false, which gives the drop area its own tab stop.
withCredentials (false) sends cookies with the action request. It does nothing on the customRequest path, where you build the request.
Slots
The props that take a node. Use a slot for your own markup before reaching for a descendant selector.
children is the trigger, so its icon is yours. <Button icon={<Icon name="upload" />}> is the usual pairing. It is the only control on the surface, which is why hasControlInside defaults to true.
iconRender is the row's leading glyph. Passing your own replaces the kit's default, and your node gets no classes added to it.
showUploadList's three icon keys are slots too, and they merge with the defaults: your removeIcon wins, and an explicit null removes the glyph.
itemRender and extra are the row-level slots. extra sits beside the file name (a size, a timestamp). itemRender replaces the whole row, including the progress bar, the status styles and the error tooltip.
With your own iconRender, a picture list file without a thumbnail shows whatever your function returns, for images and other files alike. Thumbnails of images still render.
Upload.Dragger
Dragger is the drop-zone layout of Upload, with the same icon pack glyphs in its list.
1
import { Upload } from "@/components/ui/upload"
2
// or, for the named export:
3
import { Dragger } from "@/components/ui/upload"
4
5
<Upload.Dragger
6
name="file"
7
multiple
8
action="/api/upload"
9
height={180}
10
>
11
<p className="text-heading-2 text-primary">
12
<Icon name="inbox" />
13
</p>
14
<p>Click or drag a file here to upload</p>
15
<p className="text-secondary">PDF or PNG, up to 10MB</p>
16
</Upload.Dragger>
height is Dragger's one extra prop. Everything else on the type is Upload's.
Dragger sets type="drag" and hasControlInside={false}, so the drop area itself carries role="button" and a tab stop. Its accessible name is whatever text you put inside it.
Upload.LIST_IGNORE is exported from the same file. A beforeUpload that returns false still adds the file to the list, and returning this constant does not.
Events
onStart
onMouseEnter
onMouseLeave
onClick
onChange
onDrop
onPreview
onDownload
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, since the keys stay stable across versions.
1
<Upload
2
classNames={{
3
root: "…",
4
list: "…",
5
item: "…",
6
trigger: "…",
7
}}
8
/>
A Tailwind class on one of these keys overrides the default style without !important. Writing a component token's CSS variable on the root has no effect, so style the part instead, or set the token in your theme.
API Reference
Upload
Upload's props. Rows marked antuikit in the Version column are added by the kit.
UploadFile
The shape of each entry in fileList and defaultFileList.
onChange
What onChange receives, as { file, fileList, event }.