Content
Use the browse-text, divider-text, icon, title, or subtitle props to customize the text displayed in the component.
Labs components require manual import and registration with the Vuetify instance.
import {
VFileUpload,
VFileUploadDropzone,
VFileUploadItem,
VFileUploadList,
} from 'vuetify/labs/VFileUpload'
export default createVuetify({
components: {
VFileUpload,
VFileUploadDropzone,
VFileUploadItem,
VFileUploadList,
},
})
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.
<v-file-upload density="default"></v-file-upload>| Component | Description |
|---|---|
| v-file-upload | Primary Component |
| v-file-upload-dropzone | Dropzone Component |
| v-file-upload-item | Item Component |
| v-file-upload-list | List Component |
| v-file-input | File input component |
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.
Utilize various properties to customize the look and feel of the v-file-upload component.
Use the browse-text, divider-text, icon, title, or subtitle props to customize the text displayed in the component.
The inset-file-list prop renders the file list inside the dropzone instead of below it.
The scrim property allows you to set a colored scrim when hovering over the component with files.
The v-file-upload component has several slots that can be used to customize the component.
The item slot is used to customize the appearance of the file item.
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.