
Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
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
The npm package vue3-file-selector receives a total of 2,039 weekly downloads. As such, vue3-file-selector popularity was classified as popular.
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
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.