
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
vue3-file-selector
Advanced tools
A Vue 3 headless File Selector component.
This library includes a few headless components for a drag and drop supported file selector.
Here's the parts:
FileSelector
: The main container, needs to be usedDropzone
: Handles the drag and drop logic, does not need to be usedDialogButton
: Unstyled button that opens the file dialog on click, does not need to be usedHere's a basic example with drag and drop and a list of the selected files.
<template>
<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>
</template>
<script>
import { ref } from 'vue'
import { FileSelector, Dropzone, DialogButton } from 'vue3-file-selector'
export default {
components: {
FileSelector,
Dropzone,
DialogButton
},
setup () {
const files = ref([])
return {
files
}
}
}
</script>
This library provides an unstyled button component, which already implements the logic of opening the file selector dialog. However, if you already have a button component in your project, it would probably make more sense to use this one.
This can be done as follows:
<template>
<file-selector v-model="files" v-slot="{ openDialog }">
<x-button @click="openDialog">Add files...</x-button>
</file-selector>
</template>
File
interfaceThe v-model
of FileSelector
is an Array of File
objects as they are returned from a file <input>
element or the drag and drop DataTransfer
object.
Here's how you could create a little preview of uploaded images:
<template>
<file-selector v-model="files" :accept="['image/png', 'image/jpeg']">
<dialog-button>Add images...</dialog-button>
<div>
<img v-for="preview in previews" :key="preview" :src="preview" />
</div>
</file-selector>
</template>
<script>
import { ref, watch } from 'vue'
import { FileSelector, DialogButton } from 'vue3-file-selector'
export default {
components: {
FileSelector,
DialogButton,
},
setup () {
const files = ref([])
const previews = ref([])
const toBlob = async (file) => {
const buffer = await file.arrayBuffer()
const blob = new Blob([buffer])
const srcBlob = URL.createObjectURL(blob)
return srcBlob
}
watch(files, async () => {
previews.value = await Promise.all(
files.value.map((file) => toBlob(file))
)
})
return {
files,
previews,
}
},
}
</script>
FAQs
A Vue 3 headless file selector component
We found that vue3-file-selector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.