VFileUploadItem API

Props

name	type	default
`active`	boolean	undefined
Controls the active state of the item. This is typically used to highlight the component.
`active-class`	string	undefined
The class applied to the component when it matches the current route. Find more information about the active-class prop on the vue-router documentation.
`active-color`	string	undefined
Deprecated, use `color` instead.
`append-avatar`	string	undefined
Appends a v-avatar component after default content in the append slot.
`append-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component after default content in the append slot.
`base-color`	string	undefined
Sets the color of component when not focused.
`border`	string \| number \| boolean	true
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`clearable`	boolean	false
Allows for the component to be cleared.
`color`	string	undefined
Applies specified color to the control when in an active state or input-value is true - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page,
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`file`	File	null
The file object uploaded
`file-icon`	string	'mdi-file-document'
The icon prepending each uploaded file. This will be a preview image if the file is an image.
`height`	string \| number	undefined
Sets the height for the component.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`index`	number	undefined
The index of the file in the upload list.
`lines`	false \| 'one' \| 'two' \| 'three'	'two'
The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.
`link`	boolean	undefined
Designates that the component is a link. This is automatic when using the href or to prop.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`nav`	boolean	false
Reduces the width v-list-item takes up as well as adding a border radius.
`prepend-avatar`	string	undefined
Prepends a v-avatar component in the prepend slot before default content.
`prepend-gap`	string \| number	undefined
Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children.
`prepend-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component in the prepend slot before default content.
`replace`	boolean	false
Setting replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	true
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`show-size`	boolean	false
Show the size of the file
`slim`	boolean	false
Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation.
`subtitle`	string \| number \| boolean	undefined
Specify a subtitle text for the component.
`tabindex`	string \| number	undefined
Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy="track"` to prevent Tab key navigation into items.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string \| number \| boolean	undefined
Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native `title` attribute, that must be set with `v-bind:title.attr` instead.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`value`	any	undefined
The value used for selection. Obtained from `v-list`’s `v-model:selected` when the item is selected.
`variant`	'flat' \| 'text' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click`	[MouseEvent \| KeyboardEvent]
Event that is emitted when the component is clicked.
`click:remove`	[]
Emitted when the remove icon is clicked

Slots

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{ props: { onClick: () => void } }

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{ subtitle: string | number | boolean }

{ title: string | number | boolean }

`append`
Adds an item inside the input and after input content.
`clear`
Slot for the icon button to clear/remove a file
`default`
The default Vue slot.
`prepend`
Adds an item outside the input and before input content.
`subtitle`
Slot for the component’s subtitle content.
`title`
Slot for the component’s title content.

#VFileUploadItem API

VFileUploadItem API