Headless File Selector For Vue 3

This is a headless file picker (dropzone) component created for Vue 3 applications.

How to use it:

1. Import the file selector.

import { ref } from 'vue'
import { FileSelector, Dropzone, DialogButton } from 'vue3-file-selector'
export default {
  components: {
  // ...

2. Create a basic file selector.

<file-selector v-model="files">
  <dropzone v-slot="{ hovered }">
      class="block w-full h-64 rounded-lg border-4 border-dashed border-gray-400 transition-colors duration-150 flex flex-col space-y-4 justify-center items-center"
      :class="{ 'border-blue-200': hovered }"
        <li v-for="file in files" :key="file.name">
          {{ file.name }}
      <dialog-button class="bg-indigo-400 rounded text-white px-2 py-1"
        >Add files...</dialog-button

3. Available component props.

modelValue: {
  type: Array,
  required: true
allowMultiple: {
  type: Boolean,
  default: true
accept: {
  type: Array,
  default: undefined


Headless File Selector For Vue 3

Download Details:

Author: cyon

Live Demo: https://codesandbox.io/s/sweet-fog-f5wgd?file=/src/App.vue

Download Link: https://github.com/cyon/vue3-file-selector/archive/refs/heads/main.zip

Official Website: https://github.com/cyon/vue3-file-selector

Install & Download:

Add Comment