Vue.js component for adding a file upload button for Vuetify

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

Usage

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

Simple Upload button

<upload-btn></upload-btn>

Button with icon

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

Button as icon

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

Props

You can use the following props

Name	Description	Type	Default
accept	HTML input accept attribute	string	*
block	block	bool	false
fileChangedCallback	callback for when a file is selected, returns a File object	function	undefined
color	vuetify color, e.g. 'primary'	string	'primary'
disabled	sets disabled property for input/button	bool	false
flat	sets button flat	bool	false
hover	button has hoverable effect	bool	true
icon	button is icon button	bool	false
large	button is large	bool	false
loading	loading state for button	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'

GitHub