fix(useDropZone): validate all file types individually when dropping multiple files (#4325)

LouisMazel · web-flow · commit b01cfd4b09b8 · 2024-12-24T12:32:37.000+08:00
diff --git a/packages/core/useDropZone/demo.vue b/packages/core/useDropZone/demo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDropZone, useEventListener } from '@vueuse/core'
+import { useDropZone } from '@vueuse/core'
 import { ref } from 'vue'
 
 const filesData = ref<{ name: string, size: number, type: string, lastModified: number }[]>([])
@@ -31,32 +31,16 @@ function onImageDrop(files: File[] | null) {
 
 const dropZoneRef = ref<HTMLElement>()
 const imageDropZoneRef = ref<HTMLElement>()
-const pngRef = ref()
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
-useEventListener(pngRef, 'dragstart', (event) => {
-  event.dataTransfer?.setData('image/png', '/vue.png')
-})
-
 const { isOverDropZone: isOverImageDropZone } = useDropZone(imageDropZoneRef, { dataTypes: ['image/png'], onDrop: onImageDrop })
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <div class="w-full h-auto relative">
-      <p>Drop files on to drop zones</p>
-
-      <div class="flex gap-6">
-        <div class="flex flex-col items-center">
-          <img ref="pngRef" src="/vue.png" alt="Drag me" h-10>
-          <span>PNG</span>
-        </div>
-        <div class="flex flex-col items-center">
-          <img src="/favicon.svg" alt="Drag me" h-10>
-          <span>SVG</span>
-        </div>
-      </div>
+      <p>Drop files from your computer on to drop zones</p>
 
       <div grid="~ cols-2 gap-2">
         <div
diff --git a/packages/core/useDropZone/index.md b/packages/core/useDropZone/index.md
@@ -6,6 +6,12 @@ category: Elements
 
 Create a zone where files can be dropped.
 
+::: warning
+
+Due 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.
+
+:::
+
 ## Usage
 
 ```vue
diff --git a/packages/core/useDropZone/index.ts b/packages/core/useDropZone/index.ts
@@ -52,34 +52,45 @@ export function useDropZone(
     }
 
     const checkDataTypes = (types: string[]) => {
-      if (_options.dataTypes) {
-        const dataTypes = unref(_options.dataTypes)
-        return typeof dataTypes === 'function'
-          ? dataTypes(types)
-          : dataTypes
-            ? dataTypes.some(item => types.includes(item))
-            : true
-      }
-      return true
+      const dataTypes = unref(_options.dataTypes)
+
+      if (typeof dataTypes === 'function')
+        return dataTypes(types)
+
+      if (!dataTypes?.length)
+        return true
+
+      if (types.length === 0)
+        return false
+
+      return types.every(type =>
+        dataTypes.some(allowedType => type.includes(allowedType)),
+      )
     }
 
-    const checkValidity = (event: DragEvent) => {
-      const items = Array.from(event.dataTransfer?.items ?? [])
-      const types = items.map(item => item.type)
+    const checkValidity = (items: DataTransferItemList) => {
+      const types = Array.from(items ?? []).map(item => item.type)
 
       const dataTypesValid = checkDataTypes(types)
       const multipleFilesValid = multiple || items.length <= 1
 
       return dataTypesValid && multipleFilesValid
     }
 
+    const isSafari = () => (
+      /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent)
+      && !('chrome' in window)
+    )
+
     const handleDragEvent = (event: DragEvent, eventType: 'enter' | 'over' | 'leave' | 'drop') => {
-      isValid = checkValidity(event)
+      const dataTransferItemList = event.dataTransfer?.items
+      isValid = (dataTransferItemList && checkValidity(dataTransferItemList)) ?? false
 
-      if (!isValid) {
-        if (preventDefaultForUnhandled) {
-          event.preventDefault()
-        }
+      if (preventDefaultForUnhandled) {
+        event.preventDefault()
+      }
+
+      if (!isSafari() && !isValid) {
         if (event.dataTransfer) {
           event.dataTransfer.dropEffect = 'none'
         }
