UploadProps

Premium

Represents the props of the KendoReact Upload component.

Name	Type	Default	Description
accept?	string		Sets the accept attribute of the file input element to specify allowed file types. Example: jsx <Upload accept=".jpg,.png" />
actionsLayout?	UploadActionsLayout		Specifies the layout of the action buttons. Defaults to end. Example: jsx <Upload actionsLayout="start" />
ariaDescribedBy?	string		Identifies elements that describe the Upload component, similar to the aria-describedby attribute. Example: jsx <Upload ariaDescribedBy="upload-description" />
ariaLabelledBy?	string		Identifies elements that label the Upload component, similar to the aria-labelledby attribute. Example: jsx <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: jsx <Upload className="custom-upload-class" />
defaultFiles?	UploadFileInfo[]		Provides the initial list of files to be displayed in uncontrolled mode. Example: jsx <Upload defaultFiles={[{ name: 'file1.jpg', size: 1024 }]} />
disabled?	boolean		Disables the Upload component. Defaults to false. Example: jsx <Upload disabled={true} />
files?	UploadFileInfo[]		Provides the list of files to be displayed in controlled mode. Example: jsx <Upload files={[{ name: 'file1.jpg', size: 1024 }]} />
id?	string		Specifies the id attribute of the Upload component. Example: jsx <Upload id="upload-component" />
listItemUI?	React.ComponentType<UploadListItemProps>		Customizes the rendering of list items in the file list. Example: jsx <Upload listItemUI={(props) => <CustomListItem {...props} />} />
multiple?	boolean		Enables or disables the selection of multiple files. Defaults to true. Example: jsx <Upload multiple={false} />
onAdd?	(event: UploadOnAddEvent) => void		Triggered when new files are selected for upload. Example: jsx <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: jsx <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: jsx <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: jsx <Upload onCancel={(event) => console.log('Upload canceled')} />
onProgress?	(event: UploadOnProgressEvent) => void		Triggered when the upload progress of a file changes. Example: jsx <Upload onProgress={(event) => console.log(event.percentComplete)} />
onRemove?	(event: UploadOnRemoveEvent) => void		Triggered when files are removed. May include a server response if applicable. Example: jsx <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: jsx <Upload onStatusChange={(event) => console.log(event.files)} />
removeField?	string		Sets the FormData key which contains the list of file names that are submitted to removeUrl. Defaults to fileNames.
removeHeaders?	UploadHttpHeaders		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?	"text" | "arraybuffer" | "blob" | "json"		Sets the expected response type of the server. Used to parse the response appropriately. Defaults to json.
restrictions?	UploadFileRestrictions		Configures file restrictions such as allowed extensions and maximum file size. Example: jsx <Upload restrictions={{ allowedExtensions: ['.jpg', '.png'], maxFileSize: 1048576 }} />
saveField?	string		Sets the FormData key which contains the files submitted to saveUrl. Defaults to files.
saveHeaders?	UploadHttpHeaders		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?	React.ComponentType<UploadSelectMessageProps>		Customizes the content of the add button in the Upload component. Example: jsx <Upload selectMessageUI={(props) => <CustomSelectMessage {...props} />} />
showActionButtons?	boolean		Toggles the visibility of action buttons when autoUpload is set to false. Example: jsx <Upload autoUpload={false} showActionButtons={true} />
showFileList?	boolean		Toggles the visibility of the file list in the Upload component. Example: jsx <Upload showFileList={false} />
tabIndex?	string | number		Sets the tabIndex attribute of the Upload component. Example: jsx <Upload tabIndex={0} />
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.