New to KendoReactStart a free 30-day trial

Represents the configuration options for the Upload button. Combines button styling props, upload behavior props, and event callbacks.

Definition

Package:@progress/kendo-react-conversational-ui

Properties

accept?

string

Sets the accept attribute of the file input element to specify allowed file types.

Example:

jsx
<Upload accept=".jpg,.png" />

disabled?

boolean

Specifies if the Button is disabled (see example).

Default:

false

fillMode?

"link" | "solid" | "outline" | "flat" | "clear"

Configures the fillMode of the Button. See Button Appearance.

Default:

undefined (theme-controlled)

icon?

string

Defines the name for an existing icon in a KendoReact theme (see example). The icon renders inside the Button by a span.k-icon element.

Defines a CSS class — or multiple classes separated by spaces — which apply to a span element inside the Button (see example). Allows you to use custom icons.

multiple?

boolean

Enables or disables the selection of multiple files. Defaults to true.

Default:

true

onRemoveAttachment?

(fileName: string) => void

Fires when the user removes an attachment by clicking the remove button. In controlled mode (when attachments prop is provided), use this to update your state.

Parameters:fileNamestring

Fires when the user selects files via the upload button. Provides both the newly selected files and the complete file state.

Parameters:eventPromptBoxSelectAttachmentsEvent

restrictions?

UploadFileRestrictions

Configures file restrictions such as allowed extensions and maximum file size.

Example:

jsx
<Upload restrictions={{ allowedExtensions: ['.jpg', '.png'], maxFileSize: 1048576 }} />

rounded?

"none" | "full" | "small" | "medium" | "large"

Configures the roundness of the Button. See Button Appearance.

The available options are:

  • small
  • medium
  • large
  • full
  • none
Default:

undefined (theme-controlled)

size?

"xs" | "small" | "medium" | "large"

Configures the size of the Button. See Button Appearance.

Default:

undefined (theme-controlled)

svgIcon?

SVGIcon

Defines the SVG icon that renders inside the Button component.

themeColor?

"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "inverse"

Configures the themeColor of the Button. See Button Appearance.

Default:

undefined (theme-controlled)