VFileUploadDropzone API

Props

name	type	default
`border`	string \| number \| boolean	false
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.
`browse-text`	string	'$vuetify.fileUpload.browse'
Text for the browse button.
`clearable`	boolean	false
Allows for the component to be cleared.
`close-delay`	string \| number	undefined
Milliseconds to wait before closing component. Only applies to hover and focus events.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-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.
`divider-text`	string	'$vuetify.fileUpload.divider'
Text in the divider.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`error`	boolean	false
Puts the dropzone in an error state, changing the border color.
`height`	string \| number	undefined
Sets the height for the component.
`hide-browse`	boolean	false
Hides the browse button.
`icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$upload'
Apply a specific icon using the v-icon component.
`inset-file-list`	boolean	false
Renders the file list inside the dropzone container instead of below it.
`length`	string \| number	150
Sets the dividers length. Default unit is px.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`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.
`model-value`	File[]	[]
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Allows multiple files to be uploaded.
`opacity`	string \| number	undefined
Sets the component’s opacity value
`open-delay`	string \| number	undefined
Milliseconds to wait before opening component. Only applies to hover and focus events.
`position`	'fixed' \| 'relative' \| 'absolute' \| 'static' \| 'sticky'	undefined
Sets the position for the component.
`rounded`	string \| number \| boolean	undefined
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.
`scrim`	string \| boolean	true
Determines whether an overlay is used when hovering over the component with files. Accepts true/false to enable background, and string to define color.
`show-size`	boolean	false
Shows the size of the file.
`subtitle`	string	undefined
Specify a subtitle text for the component.
`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.
`thickness`	string \| number	undefined
Sets the dividers thickness. Default unit is px.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string	'$vuetify.fileUpload.title'
Specify a title text for the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:browse`	[]
Emitted when the browse button is clicked.
`click:remove`	[number]
Emitted when a file’s remove button is clicked.
`drop`	[File[]]
Emitted when files are dropped onto the dropzone.

Slots

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

{
  isDragging: boolean
  hasFiles: boolean
  files: File[]
  props: { onClick: () => void }
}

never

never

never

{ file: File; props: { 'onClick:remove': () => void } }

{ file: File; props: { 'onClick:remove': () => void } }

never

`browse`
Slot for the browse button.
`default`
The default Vue slot.
`divider`
Slot for the divider between icon and the browse button.
`icon`
Slot to replace the default upload icon.
`input`
Slot to replace the native file input.
`item`
Define a custom item appearance.
`single`
Slot for customizing the appearance of a single file when using inset file list mode.
`title`
Slot for the component’s title content.

#VFileUploadDropzone API

VFileUploadDropzone API