useDropZone

Demo

Drop files into dropZone

isOverDropZone: false

Usage

html

<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

typescript

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