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

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

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

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

Name Description Type Default
accept HTML input accept attribute string *
block block bool false
depressed remove box shadow 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
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'
uniqueId use a unique id for the button for re-usability on same page bool false

Github Repository

Tags: #VueJs #Upload