useDropZone

Category

Export Size

629 B

Last Changed

2 weeks ago

Create a zone where files can be dropped.

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>

Type Declarations

export interface UseDropZoneReturn {
  isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
  onDrop?: (files: File[] | null) => void
): UseDropZoneReturn

Source

Source • Demo • Docs

© 2019-present Anthony Fu
Licensed under the MIT License.
https://vueuse.org/core/useDropZone/