File Picker

The file picker component enables users to select files either by opening a file selection dialog or by using drag-and-drop functionality.

Labelling

Label Text

The label attribute provides a short description of the purpose of the File Picker.

If you can not use the visible label, provide it using the aria-label attribute.

It will be announced by screen readers so that those users will know the purpose of the Select.

Helper text

The helper-text attribute provides additional information about the purpose of the File Picker.
To add HTML to the helper text, use the helper-text slot.

Contextual Help

You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.

<script setup lang="ts">
import { VFilePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFilePicker label="Label">
    Drag & Drop or click to upload
    <VContextualHelp slot="contextual-help">Acceptable formats: .jpg, .png, .gif</VContextualHelp>
  </VFilePicker>
</template>

Validation Feedback

Error Text

The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.

<script setup lang="ts">
import { VFilePicker } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFilePicker error-text="Please provide a valid file."> Drag & Drop or click to upload </VFilePicker>
</template>

Disabled

The disabled attribute disables the File Picker.

Size

Use the size attribute to set the file picker’s block-size.

<script setup lang="ts">
import { VFilePicker, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="wrapper">
    <VFilePicker size="normal" label="Normal">
      {' '}
      File picker with Normal size (default){' '}
    </VFilePicker>
    <VFilePicker size="expanded" label="Expanded">
      {' '}
      File picker with Expanded size (default){' '}
    </VFilePicker>
  </div>
</template>

<style>
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

<div class="wrapper">
  <vwc-file-picker size="normal" label="Normal"> File picker with Normal size (default) </vwc-file-picker>
  <vwc-file-picker size="expanded" label="Expanded"> File picker with Expanded size (default) </vwc-file-picker>
</div>

<style>
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
</style>