VueUseuseDropZone
Create an zone where files can be dropped.
Demo
Drop files into dropZone
isOverDropZone: false
Usage
<script setup lang="ts">
import { useDropZone } from '@vueuse/core'
const dropZoneRef = ref<HTMLDivElement>()
function onDrop(files: File[] | null) {
// called when files are dropped on zone
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>
<template>
<div ref="dropZoneRef">
Drop files here
</div>
</template>
<script setup lang="ts">
import { useDropZone } from '@vueuse/core'
const dropZoneRef = ref<HTMLDivElement>()
function onDrop(files: File[] | null) {
// called when files are dropped on zone
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</script>
<template>
<div ref="dropZoneRef">
Drop files here
</div>
</template>
Type Declarations
export interface UseDropZoneReturn {
isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
target: MaybeComputedRef<HTMLElement | null | undefined>,
onDrop?: (files: File[] | null) => void
): UseDropZoneReturn
export interface UseDropZoneReturn {
isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
target: MaybeComputedRef<HTMLElement | null | undefined>,
onDrop?: (files: File[] | null) => void
): UseDropZoneReturn
Source
Contributors
Anthony Fu
aki77
Matthias Stiller
Julien Martin