@vx-components/fileinput v0.1.1

vx-fileinput

A VxFileinput Component

Install

npm install --save @vx-components/fileinput

VxFileinput API

props

• v-model String (optional) Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.

• accept String (optional) This property indicates the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers: - A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc). - A valid MIME type with no extensions. - audio/representing sound files. - video/representing video files. - image/representing image files.

• id String (optional) Defines a unique identifier (ID) which must be unique in the whole document.

• autofocus Boolean (optional) This Boolean property lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control.

• capture Boolean (optional) This Boolean property indicates that capture of media directly from the device's environment using a media capture mechanism is preferred.

• disabled Boolean (optional) default: false This Boolean property indicates that the user cannot interact with the control.

• hidden Boolean (optional) This Boolean property indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render the composant with the hidden property set.

• title String (optional) Contains a text representing advisory information related to the element it belongs to. It's also use to display an error message when the input is invalid.

• name String (optional) The name of the control.

• placeholder String (optional) default: 'Select a file' A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

• required Boolean (optional) default: false This property specifies that the user must fill in a value before submitting a form.

• data-class-error String (optional) default: 'uk-form-danger'

events

• invalid Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form.

• input Fired when the value is changed.

• change Fired when a change to the initial element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

methods

• isEmpty() Define if the control value is empty of not.

• setError() Set a message error

• clearError() clear the message error

Usage

<template>
  <vx-fileinput v-model="value" @input="onInput" />
</template>

<script>
  import VxFileinput from '@vx-components/fileinput'
  
  export default {
    data: () => ({
      value: ''
    }),
    methods: {
      onInput () {
        // this.value contains the new value
      }
    },
    components: { VxFileinput }
  }
</script>

License

Under the MIT license. See LICENSE file for more details.