---
title: UploadFile
description: UploadFile
element: vaadin-upload-file
---

## 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
-----------------|-------------
`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.

The following custom CSS properties are available for styling:

Custom CSS property                          |
:--------------------------------------------|
`--vaadin-upload-file-border-radius`         |
`--vaadin-upload-file-button-background`     |
`--vaadin-upload-file-button-border-color`   |
`--vaadin-upload-file-button-border-radius`  |
`--vaadin-upload-file-button-border-width`   |
`--vaadin-upload-file-button-text-color`     |
`--vaadin-upload-file-button-padding`        |
`--vaadin-upload-file-done-color`            |
`--vaadin-upload-file-error-color`           |
`--vaadin-upload-file-error-font-size`       |
`--vaadin-upload-file-error-font-weight`     |
`--vaadin-upload-file-error-line-height`     |
`--vaadin-upload-file-gap`                   |
`--vaadin-upload-file-name-color`            |
`--vaadin-upload-file-name-font-size`        |
`--vaadin-upload-file-name-font-weight`      |
`--vaadin-upload-file-name-line-height`      |
`--vaadin-upload-file-padding`               |
`--vaadin-upload-file-status-color`          |
`--vaadin-upload-file-status-font-size`      |
`--vaadin-upload-file-status-font-weight`    |
`--vaadin-upload-file-status-line-height`    |
`--vaadin-upload-file-warning-color`         |

See [Styling Components](https://vaadin.com/docs/latest/styling/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](#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

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