Headless File Selector For Vue 3

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:

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:

You Might Be Interested In:

Add Comment