BlogPlaygroundOne

File upload

Installation

Labs components require manual import and registration with the Vuetify instance.

src/plugins/vuetify.js
import {
  VFileUpload,
  VFileUploadDropzone,
  VFileUploadItem,
  VFileUploadList,
} from 'vuetify/labs/VFileUpload'

export default createVuetify({
  components: {
    VFileUpload,
    VFileUploadDropzone,
    VFileUploadItem,
    VFileUploadList,
  },
})

Usage

The v-file-upload component is a drag and drop area for uploading files. It can be customized with slots and has support for density and multiple styles.

Drag and drop files here
or
<v-file-upload density="default"></v-file-upload>

API

ComponentDescription
v-file-uploadPrimary Component
v-file-upload-dropzoneDropzone Component
v-file-upload-itemItem Component
v-file-upload-listList Component
v-file-inputFile input component
Toggle Inline API

Guide

The v-file-upload component is a more visual counterpart to the v-file-input component. It provides a drag and drop area for files, and can be customized with slots.

Props

Utilize various properties to customize the look and feel of the v-file-upload component.

Content

Use the browse-text, divider-text, icon, title, or subtitle props to customize the text displayed in the component.

Drag and Drop Here
or choose locally

Inset file list

The inset-file-list prop renders the file list inside the dropzone instead of below it.

sunset.png
5.0 kB
aurora.png
4.4 kB
horizon.png
3.4 kB

Scrim

The scrim property allows you to set a colored scrim when hovering over the component with files.

Drag and drop files here

Slots

The v-file-upload component has several slots that can be used to customize the component.

Item

The item slot is used to customize the appearance of the file item.

Drag and drop files here
sunset.png
4.4 kB
aurora.png
5.0 kB
horizon.png
3.4 kB

Misc

List

Use v-file-upload-list with the default slot to compose v-file-upload-item components directly. The slot provides files and onClickRemove for wiring up removal.

Drag and drop files here
sunset.png
5.0 kB
aurora.png
4.4 kB
horizon.png
3.4 kB
tropical.png
4.2 kB
neon.png
4.0 kB
twilight.png
4.3 kB

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.