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>

Upon file change, the Upload Button component will use the callback function provided to the component, see the following example:

<template>
  <upload-btn
    :fileChangedCallback="fileChanged"
  >

  </upload-btn>
</template>

<script>
  import UploadButton from 'vuetify-upload-button'

  export default {
    methods: {
      fileChanged (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>

Props

You can use the following props