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.

In a form

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

<template>
  <form method="post" enctype="multipart/form-data" class="form">
    <VLayout column-basis="block">
      <VFilePicker name="files" label="Pick files" helper-text="multiple files of any type" max-files="50" required>
        {' '}
        Drag & Drop or click to upload{' '}
      </VFilePicker>
      <div class="buttons">
        <VButton label="Reset" appearance="outlined" type="reset"></VButton>
        <VButton label="Submit" appearance="filled" type="submit"></VButton>
      </div>
    </VLayout>
  </form>
</template>

<style scoped>
.form {
  width: 400px;
}
.buttons {
  display: flex;
  gap: 12px;
}
</style>

<form method="post" enctype="multipart/form-data" class="form">
  <vwc-layout column-basis="block">
    <vwc-file-picker name="files" label="Pick files" helper-text="multiple files of any type" max-files="50" required> Drag & Drop or click to upload </vwc-file-picker>
    <div class="buttons">
      <vwc-button label="Reset" appearance="outlined" type="reset"></vwc-button>
      <vwc-button label="Submit" appearance="filled" type="submit"></vwc-button>
    </div>
  </vwc-layout>
</form>

<style>
  .form {
    width: 400px;
  }
  .buttons {
    display: flex;
    gap: 12px;
  }
</style>