useDropZone

ファイルをドロップできるゾーンを作成します。

::: warning

Safariブラウザの制限により、ファイルタイプの検証はドロップイベント時にのみ可能であり、ドラッグイベント中にはできません。その結果、Safariではファイルタイプに関係なく、ドラッグ操作中は常にisOverDropZoneの値がtrueになります。

:::

使用方法

<script setup lang="ts">
import { useDropZone } from '@vueuse/core'
import { ref } from 'vue'

const dropZoneRef = ref<HTMLDivElement>()

function onDrop(files: File[] | null) {
  // ゾーンにファイルがドロップされたときに呼び出されます
}

const { isOverDropZone } = useDropZone(dropZoneRef, {
  onDrop,
  // 受け取るデータのタイプを指定します。
  dataTypes: ['image/jpeg'],
  // 複数ファイルのドロップを制御します
  multiple: true,
  // 未処理のイベントに対してデフォルトの動作を防ぐかどうか
  preventDefaultForUnhandled: false,
})
</script>

<template>
  <div ref="dropZoneRef">
    ここにファイルをドロップしてください
  </div>
</template>