UploadFile

Description #

<vaadin-upload-file> element represents a file in the file list of <vaadin-upload>.

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
row	File container
info	Container for file status icon, file name, status and error messages
done-icon	File done status icon
warning-icon	File warning status icon
meta	Container for file name, status and error messages
name	File name
error	Error message, shown when error happens
status	Status message
commands	Container for file command buttons
start-button	Start file upload button
retry-button	Retry file upload button
remove-button	Remove file button

The following state attributes are available for styling:

Attribute	Description
disabled	Set when the element is disabled
focus-ring	Set when the element is focused using the keyboard.
focused	Set when the element is focused.
error	An error has happened during uploading.
indeterminate	Uploading is in progress, but the progress value is unknown.
uploading	Uploading is in progress.
complete	Uploading has finished successfully.

See Styling Components documentation.

Properties #

complete #

Type: boolean

True if uploading is completed, false otherwise.

disabled #

Type: boolean

If true, the user cannot interact with this element.

errorMessage #

Type: string

Error message returned by the server, if any.

file #

Type: File

The object representing a file.

fileName #

Type: string

Name of the uploading file.

held #

Type: boolean

True if uploading is not started, false otherwise.

i18n #

Type: UploadFileI18n

The object used to localize this component.

See also: UploadFileI18n

indeterminate #

Type: boolean

True if remaining time is unknown, false otherwise.

progress #

Type: number

Number representing the uploading progress.

status #

Type: string

Uploading status.

uploading #

Type: boolean

True if uploading is in progress, false otherwise.

Events #

file-abort #

Type: CustomEvent

Fired when abort button is pressed. It is listened by vaadin-upload which will abort the upload in progress, and then remove the file from the list.

file-retry #

Type: CustomEvent

Fired when the retry button is pressed. It is listened by vaadin-upload which will start a new upload process of this file.

file-start #

Type: CustomEvent

Fired when the start button is pressed. It is listened by vaadin-upload which will start a new upload process of this file.

Types #

UploadFileI18n #

export interface UploadFileI18n {
  file: {
    retry: string;
    start: string;
    remove: string;
  };
}