Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue3-file-selector
Advanced tools
Readme
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 350 weekly downloads. As such, vue3-file-selector popularity was classified as not 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.