vuetify-upload-button

A Vue component for Vuetify.

This component is a file upload input with the base functionality of a Vuetify button.

Installation

``js
npm i vuetify-upload-button
`

$3

Include the script file, then install the component with Vue.use(UploadButton); e.g.:

`html



`

$3

`js
import UploadButton from 'vuetify-upload-button';

export default {
components: {
'upload-btn': UploadButton
}
}
`

$3

In order for the ripple directive to work properly, you must import the Ripple directive.

`js
// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
// other stuff
directives: {
Ripple
}
})
`

Usage

Once installed, it can be used in a template as simply as:

Simple Upload button
`html

`

Upon file change, the Upload Button component emit a file-update event with the file or files as the argument, see the following example:
`html



`

Button with icon. The 'icon' slot defaults to the right:
`html
title="Button With Icon"
>


`

Button with left icon:
`html
title="Button With Icon"
>


`

Button as icon
`html



`

You can clear the file input using a ref
`html



``

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