Appearance

FileUpload ​

Component to manage files selected for upload.

Basic Usage ​

The code below can be used to select and manage multiple files at once. You can also play with the component props in the playground below.

vue
<script lang="ts">
  const files = ref([]);

  function deleteFile(file) {
    files.value.splice(files.value.findIndex(f => f === file), 1);
  }
</script>

<template>
  <FileUpload 
    :files="files" 
    multiple 
    @fileSelect="(e) => files = e.files" 
    @fileDelete="deleteFile"
  />
</template>

Playground ​

Drag and drop your file hereor

File types ​

In case you want to restrict the accepted file types you can pass an array of accepted types to the component via the fileTypes prop.

vue
  <FileUpload 
    :files="files" 
    :fileTypes="['PDF']" 
    multiple 
    @fileSelect="(e) => files = e.files" 
    @fileDelete="deleteFile" 
  />

By default, fileTypes is ['CSV', 'PDF', 'PNG', 'JPEG', 'DOC', 'XLS']

In case the user selects/drops a file with unsupported/not allowed format the component will emit the file-error event with a helpful message.

Slots ​

FileUpload accepts two slots, submitText and hint. You can change the button text with the submitText slot. Also, the hint slot displays the text you entered to the user.

vue
  <FileUpload 
    :files="files" 
    :fileTypes="['PDF']" 
    multiple 
    @fileSelect="(e) => files = e.files" 
    @fileDelete="deleteFile" 
  >
    <template #submitText>Select files</template>
    <template #hint>Click the button above to select PDF files</template>
  </FileUpload>
Drag and drop your file hereor
Click the button above to select PDF files

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.