benflux/ui
Inputs

Upload

Drag-and-drop file upload with file list management, progress indicators, and size/type validation.

Default (drag & drop)

Click to upload or drag & drop

image/*,.pdf — max 5B

Picture list

Click to upload or drag & drop

image/*

Installation

npx benflux-ui add upload

Usage

import { Upload } from "@benflux-ui/react"

// Basic drag & drop
<Upload
  accept="image/*,.pdf"
  maxSize={10}  // MB
  multiple
  onChange={(files) => console.log(files)}
/>

// Picture list with count limit
<Upload
  accept="image/*"
  listType="picture"
  maxCount={5}
  onRemove={(file) => console.log("removed", file)}
/>

// Custom upload handler
<Upload
  customRequest={async ({ file, onProgress, onSuccess, onError }) => {
    const res = await uploadToServer(file, onProgress)
    if (res.ok) onSuccess(res)
    else onError(new Error("Upload failed"))
  }}
/>

Props

PropTypeDefaultDescription
acceptstring—Accepted file types (e.g. image/*,.pdf)
multiplebooleanfalseAllow selecting multiple files
maxSizenumber—Maximum file size in MB
maxCountnumber—Maximum number of files
listType"text" | "picture""text"File list display style
onChange(files: File[]) => void—Called when the file list changes
onRemove(file: File) => void—Called when a file is removed
customRequest(options: UploadRequestOption) => void—Custom upload handler to replace the default behavior
disabledbooleanfalseDisable the upload area