Skip to content

useDropZone ​

Category
Export Size
629 B
Last Changed
2 months ago

Create a zone where files can be dropped.

Demo ​

Drop files on to drop zones

Drag mePNG
Drag meSVG
General DropZone
isOverDropZone: false
Image DropZone
isOverDropZone: false

Usage ​

vue
<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,
  // specify the types of data to be received.
  dataTypes: ['image/jpeg']
})
</script>

<template>
  <div ref="dropZoneRef">
    Drop files here
  </div>
</template>

Type Declarations ​

typescript
export interface UseDropZoneReturn {
  files: Ref<File[] | null>
  isOverDropZone: Ref<boolean>
}
export interface UseDropZoneOptions {
  /**
   * Allowed data types, if not set, all data types are allowed.
   * Also can be a function to check the data types.
   */
  dataTypes?: MaybeRef<string[]> | ((types: readonly string[]) => boolean)
  onDrop?: (files: File[] | null, event: DragEvent) => void
  onEnter?: (files: File[] | null, event: DragEvent) => void
  onLeave?: (files: File[] | null, event: DragEvent) => void
  onOver?: (files: File[] | null, event: DragEvent) => void
}
export declare function useDropZone(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options?: UseDropZoneOptions | UseDropZoneOptions["onDrop"],
): UseDropZoneReturn

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Diego Pascual
getname1997
Neo Fu
Luka Bagic
aki77
Matthias Stiller
Julien Martin

Changelog ​

v10.7.1 on 12/27/2023
15a38 - fix(useDropzone): avoid circular reference (#3683)
v10.7.0 on 12/5/2023
8f42a - fix: fix file types filter (#3540)
v10.6.0 on 11/9/2023
3f3f1 - feat: add dataTypes option (#3471)
v10.2.1 on 6/28/2023
6d4ef - feat: expose files as ref
17d8d - feat: expose more hooks
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.4 on 7/17/2022
2670e - fix: improve argument type (#1933)

Released under the MIT License.