@craydel/craydel-file-input

CraydelFileInput

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-file-input

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelFileInput from '@craydel/craydel-file-input/src/CraydelFileInput.vue'

const Components = {
  CraydelFileInput,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

Name	Type	Default	Description
id	string	random ID	Sets the DOM id on the component.
accept	string	all	File types the file input should accept.
placeholder	string	'Attach file'	Sets the component's placeholder text.
is-required	boolean	false	Puts component in a required state.
required-error	string	'Field is required'	Puts the component in an error state and passes through the custom required error message.
multiple	boolean	false	Adds the multiple attribute to the input, allowing multiple file selections.
hint	string	undefined	Hint text.
no-validation	boolean	false	Removes the validation styling from the component.
disabled	boolean	false	Disables the component.
loading	boolean | string	false	Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the primary color.
counter	boolean	false	Creates counter for number of files and total file size.

 

Usage

An example showing a file input that accepts images with multiple file selections.

<craydel-file-input accept="image/*" multiple></craydel-file-input>