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.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify-upload-button/dist/upload-button.min.js"></script>
<script type="text/javascript">
  Vue.use(UploadButton);
</script> 

Module

  import UploadButton from 'vuetify-upload-button';
 
  export default {
    components: {
      'upload-btn': UploadButton
    }
  }

IMPORTANT NOTE

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

// 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

<upload-btn></upload-btn>

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

<template>
  <upload-btn
    @file-update="update"
  >
 
  </upload-btn>
</template>
 
<script>
  import UploadButton from 'vuetify-upload-button'
 
  export default {
    methods: {
      update (file) {
        // handle file here. File will be an object.
        // If multiple prop is true, it will return an object array of files.
      }
    },
    components: {
      'upload-btn': UploadButton
    }
  }
</script> 

Button with icon. The 'icon' slot defaults to the right:

<upload-btn
  title="Button With Icon"
>
  <template slot="icon">
    <v-icon>add</v-icon>
  </template>
</upload-btn>

Button with left icon:

<upload-btn
  title="Button With Icon"
>
  <template slot="icon-left">
    <v-icon left>add</v-icon>
  </template>
</upload-btn>

Button as icon

<upload-btn icon>
  <template slot="icon">
    <v-icon>add</v-icon>
  </template>
</upload-btn>

You can clear the file input using a ref

<upload-btn ref="button" title="Button" />
 
<button @click="$refs.button.clear()" />

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