New to Kendo UI for Vue? Start a free 30-day trial

UploadProps

Represents the props of the Kendo Ui for Vue Upload component.

NameTypeDefaultDescription

accept?

string

Sets the accept attribute of the input element of the Upload.

actionsLayout?

UploadActionsLayout

Specifies the possible layouts of the action buttons (see example). Defaults to end.

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute For example these elements could contain error or hint message.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

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

Sets a class of the Upload DOM element.

defaultFiles?

UploadFileInfo[]

The initial list of files which are displayed when the Upload is in uncontrolled mode (see example).

disabled?

boolean

Disables the Upload (see example). Defaults to false.

files?

UploadFileInfo[]

The list of files which are displayed when the Upload is in controlled mode (see example).

id?

string

Specifies the id of the component.

list?

any

The component that will be rendered as a list item inside the Upload.

multiple?

boolean

Enables the selection of multiple files (see example). If set to false, only one file can be selected at a time.

onAdd?

(event: UploadOnAddEvent) => void

Fires when new files are selected for upload.

onBeforeremove?

(event: UploadOnBeforeRemoveEvent) => void

Fires before a request for a file removal is made. Can be used to add extra data to the request.

onBeforeupload?

(event: UploadOnBeforeUploadEvent) => void

Fires before a request for a file upload is made. Can be used to add extra data to the request.

onCancel?

(event: UploadOnCancelEvent) => void

Fires when user clicks on the Remove button while the file upload is in progress. Can be used when the saveUrl option is set to a function that cancels custom requests.

onProgress?

(event: UploadOnProgressEvent) => void

Fires when the progress of the file upload is changed.

onRemove?

(event: UploadOnRemoveEvent) => void

Fires when files are removed. Optionally, if a request is made, can contain a server response.

onStatuschange?

(event: UploadOnStatusChangeEvent) => void

Fires when the status of the files is changed. Optionally, if a request is made, can contain a server response.

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

Sets the restrictions for the selected files (see example).

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.

showActionButtons?

boolean

When the autoUpload option is set to false, showActionButtons toggles the visibility of the action buttons which are rendered.

showFileList?

boolean

Toggles the visibility of the file list.

tabIndex?

string | number

Specifies the tabindex of the Upload.

validateFile?

(file: UploadFileInfo) => void

Sets the custom restrictions for the selected files (see example).

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.