useDropZone not working in safari

[yurenklimbu]

Describe the bug

useDropZone not working in safari after dataTypes set.

"I copied and pasted example code for testing, but it doesn't work in the Safari browser. It works without dataTypes. Can you help me fix this?

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

const filesData = ref<{ name: string; size: number; type: string; lastModified: number }[]>([])

function onDrop(files: File[] | null) {
  filesData.value = []
  if (files) {
    filesData.value = files.map((file) => ({
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified
    }))
  }
}

const dropZoneRef = ref<HTMLElement>()

const { isOverDropZone } = useDropZone(dropZoneRef, {
  dataTypes: ['image/png'],
  onDrop
})
</script>

Reproduction

https://stackblitz.com/edit/vitejs-vite-ard9vw?file=src%2FApp.vue&terminal=dev

System Info

System:
    OS: macOS 14.4.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 129.45 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    bun: 1.1.2 - ~/.bun/bin/bun
    Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 123.1.64.122
    Chrome: 123.0.6312.124
    Edge: 123.0.2420.97
    Safari: 17.4.1
  npmPackages:
    @vueuse/core: ^10.9.0 => 10.9.0
    vue: ^3.4.21 => 3.4.21

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.