npm

Need private packages and team management tools?Check out npm Orgs. »

vuetify-upload-button

2.0.2 • Public • Published

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

install

npm i vuetify-upload-button

Downloadsweekly downloads

1,660

version

2.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability