vuetify-upload-button
A Vue component for Vuetify.
This component is a file upload input with the base functionality of a Vuetify button.
Installation
npm i vuetify-upload-button
Browser
Include the script file, then install the component with Vue.use(UploadButton);
e.g.:
Module
; components: 'upload-btn': UploadButton
IMPORTANT NOTE
In order for the ripple directive to work properly, you must import the Ripple directive.
// plugins/vuetify.js Vue
Usage
Once installed, it can be used in a template as simply as:
Simple Upload button
Upon file change, the Upload Button component emit a file-update event with the file or files as the argument, see the following example:
Button with icon. The 'icon' slot defaults to the right:
add
Button with left icon:
add
Button as icon
add
You can clear the file input using a ref
Props
You can use the following props
Name | Description | Type | Default |
---|---|---|---|
accept | HTML input accept attribute | string | * |
block | block | bool | false |
depressed | remove box shadow | bool | false |
color | vuetify color, e.g. 'primary' | string | 'primary' |
disabled | sets disabled property for input/button | bool | false |
fixedWidth | sets a fixed width for the button | string | null |
flat | sets button flat | bool | false |
hover | button has hoverable effect | bool | true |
icon | button is icon button | bool | false |
labelClass | class to apply to the label such as text color | string | '' |
large | button is large | bool | false |
loading | loading state for button | bool | false |
maxWidth | allows the button to grow based on filename length to a max | string | 100% |
multiple | allows multiple files to be uploaded, returns an array instead of single object | bool | false |
name | applies HTML name attribute | string | uploadFile |
outline | button is outline | bool | false |
ripple | button has ripple effect | bool | true |
round | button is round | bool | false |
small | button is small | bool | false |
title | text of button | string | 'Upload' |
noTitleUpdate | disabled dynamic updating of title | bool | false |
*Removed uniqueID as a prop because it should ALWAYS have a unique id