UploadProps
Represents the props of the KendoReact Upload component.
Definition
Package:@progress/kendo-react-upload
Properties
accept?
string
Sets the accept attribute of the file input element to specify allowed file types.
Example:
<Upload accept=".jpg,.png" />Specifies the layout of the action buttons. Defaults to end.
"end"
ariaDescribedBy?
string
Identifies elements that describe the Upload component, similar to the aria-describedby attribute.
Example:
<Upload ariaDescribedBy="upload-description" />ariaLabelledBy?
string
Identifies elements that label the Upload component, similar to the aria-labelledby attribute.
Example:
<Upload ariaLabelledBy="upload-label" />autoUpload?
boolean
By default, the selected files are immediately uploaded.
To change this behavior, set autoUpload to false.
batch?
boolean
When enabled, all files in the selection are uploaded in one request. Any files that are selected one after the other are uploaded in separate requests.
className?
string
Adds a custom CSS class to the Upload container element.
Example:
<Upload className="custom-upload-class" />Provides the initial list of files to be displayed in uncontrolled mode.
Example:
<Upload defaultFiles={[{ name: 'file1.jpg', size: 1024 }]} />disabled?
boolean
Disables the Upload component. Defaults to false.
false
Provides the list of files to be displayed in controlled mode.
Example:
<Upload files={[{ name: 'file1.jpg', size: 1024 }]} />id?
string
Specifies the id attribute of the Upload component.
Example:
<Upload id="upload-component" />listItemUI?
ComponentType<UploadListItemProps>
Customizes the rendering of list items in the file list.
Example:
<Upload listItemUI={(props) => <CustomListItem {...props} />} />multiple?
boolean
Enables or disables the selection of multiple files. Defaults to true.
true
onAdd?
(event: UploadOnAddEvent) => void
Triggered when new files are selected for upload.
Example:
<Upload onAdd={(event) => console.log(event.files)} />onBeforeRemove?
(event: UploadOnBeforeRemoveEvent) => void
Triggered before a file removal request is made. Can be used to add extra data to the request.
Example:
<Upload onBeforeRemove={(event) => console.log(event.additionalData)} />onBeforeUpload?
(event: UploadOnBeforeUploadEvent) => void
Triggered before a file upload request is made. Can be used to add extra data to the request.
Example:
<Upload onBeforeUpload={(event) => console.log(event.additionalData)} />onCancel?
(event: UploadOnCancelEvent) => void
Triggered when the user cancels an upload in progress. Useful for custom cancellation logic.
Example:
<Upload onCancel={(event) => console.log('Upload canceled')} />onProgress?
(event: UploadOnProgressEvent) => void
Triggered when the upload progress of a file changes.
Example:
<Upload onProgress={(event) => console.log(event.affectedFiles[0].progress)} />onRemove?
(event: UploadOnRemoveEvent) => void
Triggered when files are removed. May include a server response if applicable.
Example:
<Upload onRemove={(event) => console.log(event.files)} />onStatusChange?
(event: UploadOnStatusChangeEvent) => void
Triggered when the status of files changes. May include a server response if applicable.
Example:
<Upload onStatusChange={(event) => console.log(event.affectedFiles)} />removeField?
string
Sets the FormData key
which contains the list of file names that are submitted to removeUrl.
Defaults to fileNames.
Configures the HttpHeaders that are attached to each remove request.
removeMethod?
string
Sets the request method of the remove request.
Defaults to POST.
removeUrl?
string | (files: UploadFileInfo[], options: { formData: FormData; requestOptions: any }) => Promise<{ uid: string }>
Sets the URL of the endpoint for the remove request.
The FormData request
key is named after the removeField property.
It contains the list of file names which will be removed.
responseType?
"arraybuffer" | "blob" | "json" | "text"
Sets the expected response type
of the server.
Used to parse the response appropriately.
Defaults to json.
Configures file restrictions such as allowed extensions and maximum file size.
Example:
<Upload restrictions={{ allowedExtensions: ['.jpg', '.png'], maxFileSize: 1048576 }} />saveField?
string
Sets the FormData key which
contains the files submitted to saveUrl. Defaults to files.
Configures the HttpHeaders that are attached to each upload request.
saveMethod?
string
Sets the request method of the upload request.
Defaults to POST.
saveUrl?
string | (files: UploadFileInfo[], options: { formData: FormData; requestOptions: any }, onProgress: (uid: string, event: ProgressEvent<EventTarget>) => void) => Promise<{ uid: string }>
Sets the URL of the endpoint for the upload request.
The requested FormData key is named after
the saveField property and contains the list of files that will be uploaded.
selectMessageUI?
ComponentType<UploadSelectMessageProps>
Customizes the content of the add button in the Upload component.
Example:
<Upload selectMessageUI={(props) => <CustomSelectMessage {...props} />} />showActionButtons?
boolean
Toggles the visibility of action buttons when autoUpload is set to false.
true
showFileList?
boolean
Toggles the visibility of the file list in the Upload component.
true
tabIndex?
string | number
Sets the tabIndex attribute of the Upload component.
Example:
<Upload tabIndex={0} />webMcp?
boolean | WebMcpProps
Enables Web MCP tool registration for this component.
Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.
withCredentials?
boolean
Configures whether credentials (cookies, headers) will be sent for cross-site requests.
Defaults to true. Setting withCredentials has no effect on same-site requests.
To add credentials to the request, use the saveHeaders or removeHeaders property.