Data Entryduskmoonimplemented8 demos

Upload

Upload collects files with validation, file-list management, and custom request hooks.

Import@duskmoon-dev/components/upload

10API sections

33documented props

6behavior scenarios

Key API

acceptactionbeforeUploadcustomRequestdefaultFileListdisabled

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Upload is most often configured through `accept`, `action`, `beforeUpload`, `customRequest`.

Covered behavior

Renders trigger, hidden input, and default file list

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Upload from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function Example() {
  return (<Upload
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Renders trigger, hidden input, and default file list

test-backed

Upload scenario from the component test coverage: renders trigger, hidden input, and default file list.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadRendersTriggerHiddenInputDemo() {
  return (<Upload
  // Renders trigger, hidden input, and default file list
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Adds selected files and emits onChange

test-backed

Upload scenario from the component test coverage: adds selected files and emits onchange.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadAddsSelectedFilesAndDemo() {
  return (<Upload
  // Adds selected files and emits onChange
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Supports beforeUpload false and LIST_IGNORE

test-backed

Upload scenario from the component test coverage: supports beforeupload false and list_ignore.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadSupportsBeforeUploadFalseAndDemo() {
  return (<Upload
  // Supports beforeUpload false and LIST_IGNORE
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Uses customRequest progress and success callbacks

test-backed

Upload scenario from the component test coverage: uses customrequest progress and success callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadUsesCustomRequestProgressAndDemo() {
  return (<Upload
  // Uses customRequest progress and success callbacks
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Calls preview and removes files

test-backed

Upload scenario from the component test coverage: calls preview and removes files.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadCallsPreviewAndRemovesDemo() {
  return (<Upload
  // Calls preview and removes files
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Renders dragger dropzone and accepts dropped files

test-backed

Upload scenario from the component test coverage: renders dragger dropzone and accepts dropped files.

Source

import "@duskmoon-dev/components/styles.css";
import { Upload } from "@duskmoon-dev/components/upload";

export function UploadRendersDraggerDropzoneAndDemo() {
  return (<Upload
  // Renders dragger dropzone and accepts dropped files
  action="/api/upload"
>
  DuskMoon Upload
</Upload>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Upload
  action="/api/upload"
>
  DuskMoon Upload
</Upload>
</div>

<div data-theme="moonlight">
  <Upload
  action="/api/upload"
>
  DuskMoon Upload
</Upload>
</div>

API

The API reference below lists every parsed exported type or interface for Upload. Start with `accept`, `action`, `beforeUpload`, `customRequest` for common usage.

Types: packages/components/src/components/upload/Upload.types.tsScenarios: packages/components/src/components/upload/Upload.test.tsx

UploadPropsinterface extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" >

Prop	Type	Required	Description
`accept`	`string`	No	accept configures Upload.
`action`	`string`	No	action configures Upload.
`beforeUpload`	`(file: File, fileList: File[]) => UploadBeforeUploadResult`	No	beforeUpload configures Upload.
`children`	`ReactNode`	No	children configures Upload.
`customRequest`	`(options: UploadRequestOption) => void`	No	customRequest configures Upload.
`defaultFileList`	`UploadFile[]`	No	defaultFileList configures Upload.
`disabled`	`boolean`	No	disabled configures Upload.
`fileList`	`UploadFile[]`	No	fileList configures Upload.
`listType`	`UploadListType`	No	listType configures Upload.
`multiple`	`boolean`	No	multiple configures Upload.
`onChange`	`(info: UploadChangeParam) => void`	No	onChange configures Upload.
`onPreview`	`(file: UploadFile) => void`	No	onPreview configures Upload.
`onRemove`	`(file: UploadFile) => boolean \| Promise<boolean> \| void`	No	onRemove configures Upload.

UploadFileinterface extends <T = unknown>

Prop	Type	Required	Description
`uid`	`string`	No	uid configures Upload.
`name`	`string`	Yes	name configures Upload.
`status`	`UploadFileStatus`	No	status configures Upload.
`percent`	`number`	No	percent configures Upload.
`size`	`number`	No	size configures Upload.
`type`	`string`	No	type configures Upload.
`url`	`string`	No	url configures Upload.
`thumbUrl`	`string`	No	thumbUrl configures Upload.
`response`	`T`	No	response configures Upload.
`error`	`Error`	No	error configures Upload.
`originFileObj`	`File`	No	originFileObj configures Upload.

UploadChangeParaminterface extends <T = unknown>

Prop	Type	Required	Description
`file`	`UploadFile<T>`	Yes	file configures Upload.
`fileList`	`UploadFile<T>[]`	Yes	fileList configures Upload.
`event`	`ProgressEvent \| { percent?: number }`	No	event configures Upload.

UploadRequestOptioninterface extends <T = unknown>

Prop	Type	Required	Description
`action`	`string`	No	action configures Upload.
`file`	`File`	Yes	file configures Upload.
`filename`	`string`	Yes	filename configures Upload.
`onError`	`(error: Error) => void`	No	onError configures Upload.
`onProgress`	`(event: { percent?: number }) => void`	No	onProgress configures Upload.
`onSuccess`	`(response?: T) => void`	No	onSuccess configures Upload.

UploadListTypetype

"text" | "picture" | "picture-card"

UploadFileStatustype

"uploading" | "done" | "error" | "removed"

UploadBeforeUploadResulttype

| boolean | File | Blob | UploadListIgnore | Promise<boolean | File | Blob | UploadListIgnore>

UploadListIgnoretype

symbol

UploadDraggerPropstype

UploadProps

UploadComponenttype

ForwardRefExoticComponent< UploadProps & RefAttributes<HTMLDivElement> > & { Dragger: ForwardRefExoticComponent< UploadDraggerProps & RefAttributes<HTMLDivElement> >