Skip to content
On this page

useDropZone

Category
Last Changed
4 weeks 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(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

SourceDemoDocs

Contributors

Julien Martin

Changelog

v8.6.0 on 5/31/2022
d6407 - feat: new function (#1610)
useDropZone has loaded