# File

File selector that behaves like a native file input. However, it can be extended to behave like a drag and drop file selector.


  • Supports styling based on dropzone.
  • Built on native file input for accessibility.
  • Works with keyboard-only navigation.

# Installation


// main.js
import Vue from 'vue';
import { VFile } from 'vuetensils/src/components';

Vue.component('VFile', VFile);


// SomeComponent.vue
import { VFile } from 'vuetensils/src/components';

export default {
  components: {
  // ...

# Styled Example

# Unstyled Examples

Output HTML:

<label class="vts-file">
  <input type="file" class="vts-file__input" />
  <span class="vts-file__text">Files</span>
  <div class="vts-file__dropzone">
    <span aria-hidden="true">
      Choose files or drop here

# Using v-model

With v-model, you have access to the array of File Objects which we get from a file selection event, or a file drop event.

Note: the browser will not actually display a File Object if you try to render it in a template, but it's there.

# Multiple File selection

Just like the default file input, this component accepts a multiple prop. Setting it to a truthy value will allow a user to select multiple value.

# Custom dropzone content

This component has 1 slot for the dropzone content. This slot provides you with an object containing the following:

  • files: The FileList or an empty array.
  • droppable: A boolean capturing the status on whether or not the user has a file selected and is hovering over the dropzone.

Note that the default dropzone content has an aria-hidden="true" attribute to prevent screen readers from reading it. If you customize this content, you might want to do the same.

# Event-based classes

There are a couple extra classes that are added to root of the component based on events:

  • 'vts-file--droppable': When the user is dragging a file over the dropzone.
  • 'vts-file--selected': When at least 1 file has been selected.

You can use these events to style any element within the root.

# Custom Classes

This component can accept a classes prop to cusomize the output HTML classes:

:classes="{ root: 'root-class', input: 'input-class', text: 'text-class', dropzone: 'dropzone-class' }"
Last Updated: 7/7/2020, 10:03:39 PM