FileUpload
Components

FileUpload

Combine a Dropzone and FileList while the application manages upload state.

FileUpload combines a Dropzone with a FileList. Handle onFiles to start uploads, then update files with each upload's status, progress, and error. The component renders those values; the application performs the transfer.

accept is a hint for the native file picker. Dropped files bypass that hint. Validate file types in your handler and on the server. maxSize rejects oversized files from both entry points and reports them through onReject.

FileUploadProps

FileUpload inherits all DropzoneProps except onFiles, and adds the file list state.

FileUploadProps props
PropTypeDefaultDescription
filesUploadFile[]—Tracked file objects.
onFiles(files: File[]) => void—Called when the user picks or drops native files.
onRemove(id: string) => void—Remove handler for existing files.
acceptstring—File input accept string, e.g. ".csv,image/*".
multipleboolean—Allow multiple files.
disabledboolean—Prevents interaction.
maxSizenumber—Rejects files larger than this, in bytes.
onReject(rejections: { file: File; reason: string }[]) => void—Called for oversized files.
labelReactNode—Primary label text.
hintReactNode—Dim secondary text.
iconReactNode—Custom icon override.
compactboolean—Shrinks to a single-line strip.

DropzoneProps

Dropzone is the drag-and-drop + click-to-browse target. Its props are also available on FileUpload.

DropzoneProps props
PropTypeDefaultDescription
onFiles(files: File[]) => void—Called when the user picks or drops native files.
acceptstring—File input accept string, e.g. ".csv,image/*".
multipleboolean—Allow multiple files.
disabledboolean—Prevents interaction.
maxSizenumber—Rejects files larger than this, in bytes.
onReject(rejections: { file: File; reason: string }[]) => void—Called for oversized files.
labelReactNode"Drop files here"Primary label text.
hintReactNode—Dim secondary text below the label.
iconReactNode—Custom icon override (defaults to upload icon).
compactboolean—Shrinks to a single-line strip.

FileListProps

FileListProps props
PropTypeDefaultDescription
filesUploadFile[]—Files to display.
onRemove(id: string) => void—Displays a remove button on each row and handles removal requests.

Specimens

FileUpload composed

The composed FileUpload with a dropzone above and a file list below.

FileUpload

Dropzone standalone

Dropzone used on its own without a file list. The default label includes a "or browse" call-to-action.

Dropzone

Import

ImportTSX
import {
  Dropzone,
  FileList,
  FileUpload,
  formatFileSize,
} from "@solarius/onset";
import type { UploadFile } from "@solarius/onset";