Vuetensils

File

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

Features:

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

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
    </span>
  </div>
</label>

Using v-model

With v-model, you have access to the array of File Objectsopen in new window 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 customize the output HTML classes:

:classes="{ root: string, input: string, text: string, dropzone: string }"