1---
2category: Elements
3---
4 
5# useDropZone
6 
7Create a zone where files can be dropped.
8 
9::: warning
10 
11Due to Safari browser limitations, file type validation is only possible during the drop event, not during drag events. As a result, the `isOverDropZone` value will always be `true` during drag operations in Safari, regardless of file type.
12 
13:::
14 
15## Usage
16 
17```vue
18<script setup lang="ts">
19import { useDropZone } from '@vueuse/core'
20import { useTemplateRef } from 'vue'
21 
22const dropZoneRef = useTemplateRef('dropZoneRef')
23 
24function onDrop(files: File[] | null) {
25  // called when files are dropped on zone
26}
27 
28const { isOverDropZone } = useDropZone(dropZoneRef, {
29  onDrop,
30  // specify the types of data to be received.
31  dataTypes: ['image/jpeg'],
32  // control multi-file drop
33  multiple: true,
34  // whether to prevent default behavior for unhandled events
35  preventDefaultForUnhandled: false,
36})
37</script>
38 
39<template>
40  <div ref="dropZoneRef">
41    Drop files here
42  </div>
43</template>
44```
45 
46## Type Declarations
47 
48```ts
49export interface UseDropZoneReturn {
50  files: ShallowRef<File[] | null>
51  isOverDropZone: ShallowRef<boolean>
52}
53export interface UseDropZoneOptions {
54  /**
55   * Allowed data types, if not set, all data types are allowed.
56   * Also can be a function to check the data types.
57   */
58  dataTypes?:
59    | MaybeRef<readonly string[]>
60    | ((types: readonly string[]) => boolean)
61  /**
62   * Similar to dataTypes, but exposes the DataTransferItemList for custom validation.
63   * If provided, this function takes precedence over dataTypes.
64   */
65  checkValidity?: (items: DataTransferItemList) => boolean
66  onDrop?: (files: File[] | null, event: DragEvent) => void
67  onEnter?: (files: File[] | null, event: DragEvent) => void
68  onLeave?: (files: File[] | null, event: DragEvent) => void
69  onOver?: (files: File[] | null, event: DragEvent) => void
70  /**
71   * Allow multiple files to be dropped. Defaults to true.
72   */
73  multiple?: boolean
74  /**
75   * Prevent default behavior for unhandled events. Defaults to false.
76   */
77  preventDefaultForUnhandled?: boolean
78}
79export declare function useDropZone(
80  target: MaybeRefOrGetter<HTMLElement | Document | null | undefined>,
81  options?: UseDropZoneOptions | UseDropZoneOptions["onDrop"],
82): UseDropZoneReturn
83```
84