Headless File Selector For Vue 3

Install & Download:

Description:

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: {
    FileSelector,
    Dropzone,
    DialogButton
  },
  // ...
}

2. Create a basic file selector.

<file-selector v-model="files">
  <dropzone v-slot="{ hovered }">
    <div
      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 }"
    >
      <ul>
        <li v-for="file in files" :key="file.name">
          {{ file.name }}
        </li>
      </ul>
      <dialog-button class="bg-indigo-400 rounded text-white px-2 py-1"
        >Add files...</dialog-button
      >
    </div>
  </dropzone>
</file-selector>

3. Available component props.

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

Preview: