File Upload

Drag the surveyor’s plates hereSketches or rubbings, up to 3 plates

Usage

import {
  FileUpload,
  FileUploadClearTrigger,
  FileUploadDropzone,
  FileUploadHiddenInput,
  FileUploadItem,
  FileUploadItemDeleteTrigger,
  FileUploadItemGroup,
  FileUploadItemName,
  FileUploadItemPreview,
  FileUploadItemPreviewImage,
  FileUploadItemSizeText,
  FileUploadRootProvider,
  FileUploadTrigger,
  useFileUpload,
} from "@kanzo-tech/ui";

<FileUpload accept="image/*" maxFiles={3}>
  <FileUploadDropzone>
    Drag the surveyor’s plates here
    <FileUploadTrigger size="sm">Browse the archive</FileUploadTrigger>
  </FileUploadDropzone>
  <FileUploadHiddenInput />
</FileUpload>

The accepted files live on the machine. Read them with useFileUpload inside the FileUpload provider to render the list.

Anatomy

FileUpload                       (or FileUploadRootProvider, given a useFileUpload value)
├── FileUploadLabel
├── FileUploadDropzone
│   └── FileUploadTrigger
├── FileUploadItemGroup
│   └── FileUploadItem
│       ├── FileUploadItemPreview
│       │   └── FileUploadItemPreviewImage
│       ├── FileUploadItemName
│       ├── FileUploadItemSizeText
│       └── FileUploadItemDeleteTrigger
├── FileUploadClearTrigger
└── FileUploadHiddenInput

There is no list component. FileUploadItemGroup plus a .map over useFileUpload().acceptedFiles is the loop, and it stays yours so the row can be arranged per surface.

API Reference

FileUpload

No props of its own — the API is the machine's:

Prop	Type	Default
`accept`	`string \| Record<string, string[]>`	—
`maxFiles`	`number`	`1`
`maxFileSize`	`number`	`Infinity`
`minFileSize`	`number`	`0`
`allowDrop`	`boolean`	`true`
`preventDocumentDrop`	`boolean`	`true`
`directory`	`boolean`	`false`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`required`	`boolean`	`false`

maxFiles is 1 by default, so a multi-file dropzone has to say so.

Extends React.ComponentProps<typeof ArkFileUpload.Root>, so acceptedFiles / defaultAcceptedFiles, onFileChange / onFileAccept / onFileReject, validate, transformFiles, capture, readOnly, name and ref pass through.

FileUploadTrigger

Prop	Type	Default
`variant`	`ButtonProps["variant"]`	`"outline"`
`size`	`ButtonProps["size"]`	`"md"` (`Button`'s)

Renders a Button with asChild, so it is a real button carrying the machine's click handler.

Other parts

FileUploadItem takes the file it renders. FileUploadItemDeleteTrigger is a ghost icon-sm Button. The rest — FileUploadLabel, FileUploadDropzone, FileUploadItemGroup, FileUploadItemPreview, FileUploadItemName, FileUploadItemSizeText and FileUploadHiddenInput — take their Ark part's props and add none of their own. useFileUpload re-exports useFileUploadContext: acceptedFiles, rejectedFiles and the imperative setFiles / clearFiles.

FileUploadRootProvider is the controlled root: build the machine yourself with Ark's useFileUpload hook and pass it as value when a surface outside the compound has to drive it.