apx-dsv0.1Local renderer · live
K
Foundations4
  • Getting started
  • Theming
  • Templates
  • Icons
  • Avatar
  • Badge
  • DataGrid
  • Scheduler
  • Stat
  • Table
  • Timeline
  • TreeView
  • Accordion
  • Alert
  • EmptyState
  • Progress
  • Skeleton
  • Spinner
  • SplashScreen
  • Toast
  • ColorPicker
  • FileUpload
  • Form
  • Rating
  • TagsInput
  • Combobox
  • Field
  • Select
  • Toggle
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Input
  • NumberInput
  • Radio
  • Slider
  • Switch
  • Textarea
  • AppShell
  • Div
  • Divider
  • Sidebar
  • Stack
  • Typography
  • Image
  • Breadcrumbs
  • Carousel
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Toolbar
  • CommandPalette
  • Confirm
  • Drawer
  • HoverCard
  • Menu
  • Modal
  • Popover
  • Tooltip
  • Icon
  • Card
  • PricingCard
60 componentsapx-ds/renderer
FileUpload
Variant↳ other

Form

FileUpload

Drag-and-drop file picker with per-file progress, retry/cancel, paste-to-upload, and a consumer-provided upload function. Includes <Dropzone /> as a headless primitive.

FileUpload

Drag-and-drop file picker with per-file progress, retry/cancel, and a consumer-provided upload function. Includes <Dropzone /> as a headless primitive.

Overview — dropzone with uploaded files

Loading preview…
Overview.tsx

Basic — selection only

Loading preview…
Basic.tsx

With uploader — simulated progress

Loading preview…
WithUploader.tsx

API

  • upload(file, { onProgress, signal }) — wire fetch, axios, or signed-URL flows.
  • parallelUploads — concurrent cap (default 3).
  • autoUpload — start immediately after select (default true).
  • enablePaste — opt-in clipboard image paste.

Props

PropTypeDefaultDescription
acceptstring | string[]——
autoUploadboolean——
browseButtonColorenum——
browseButtonSizeenum——
browseButtonVariantenum——
classNamestring——
colorResponsiveValue<ButtonColor>——
currentFileCountnumber——
defaultFilesFileWithProgress[] | File[]——
disabledboolean——
enablePasteboolean——
errorMessageReactNode——
filesFileWithProgress[]——
hintReactNode——
invalidboolean——
labelReactNode——
maxFilesnumber——
maxSizenumber——
minSizenumber——
multipleboolean——
namestring——
noClickboolean——
noDragEventsBubblingboolean——
noKeyboardboolean——
onComplete(file: FileWithProgress, result: unknown) => void——
onDrop(files: File[], event: Event) => void——
onError(file: FileWithProgress, err: Error) => void——
onFilesChange(files: FileWithProgress[]) => void——
onReject(rejections: FileRejection[]) => void——
onSelect(files: File[]) => void——
orientationenum——
parallelUploadsnumber——
previewMaxDimensionnumber——
progressColorenum——
progressSizeenum——
showPreviewsboolean——
sizeResponsiveValue<FileUploadSize>——
styleCSSProperties——
sxSx——
uploadFileUploadFn——
validatorFileUploadValidator——
variantResponsiveValue<FileUploadVariant>——