useDropZone
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(null)
function onDrop(dropZoneRef, files: File[] | null) {
// Trigger an event when file(s) is drop 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(null)
function onDrop(dropZoneRef, files: File[] | null) {
// Trigger an event when file(s) is drop 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: MaybeRef<HTMLElement | null>,
onDrop: (files: File[] | null) => void
): UseDropZoneReturn
export interface UseDropZoneReturn {
isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
target: MaybeRef<HTMLElement | null>,
onDrop: (files: File[] | null) => void
): UseDropZoneReturn
Source
Contributors
Julien Martin