Skip to content
On this page

useDropZone

Category
Last Changed
1 hour ago

Create an zone where files can be dropped.

Demo

Drop files into dropZone

Drop me
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: MaybeRef<HTMLElement | null | undefined>,
  onDrop: (files: File[] | null) => void
): UseDropZoneReturn
export interface UseDropZoneReturn {
  isOverDropZone: Ref<boolean>
}
export declare function useDropZone(
  target: MaybeRef<HTMLElement | null | undefined>,
  onDrop: (files: File[] | null) => void
): UseDropZoneReturn

Source

SourceDemoDocs

Contributors

aki77
Matthias Stiller
Julien Martin

Changelog

v8.9.4 on 7/17/2022
2670e - fix: improve argument type (#1933)
v8.6.0 on 5/31/2022
d6407 - feat: new function (#1610)
useDropZone has loaded