feat(useDropZone): add multiple prop to control multi-file drop (#4227)

Co-authored-by: Dan T. Ngossinga <[email protected]>

Author: danngossinga

packages/core/useDropZone/index.md

@@ -21,7 +21,11 @@ function onDrop(files: File[] | null) {
 const { isOverDropZone } = useDropZone(dropZoneRef, {
   onDrop,
   // specify the types of data to be received.
-  dataTypes: ['image/jpeg']
+  dataTypes: ['image/jpeg'],
+  // control multi-file drop
+  multiple: true,
+  // whether to prevent default behavior for unhandled events
+  preventDefaultForUnhandled: false,
 })
 </script>
 

packages/core/useDropZone/index.ts

@@ -3,7 +3,7 @@ import type { Ref } from 'vue-demi'
 // eslint-disable-next-line no-restricted-imports
 import { ref, shallowRef, unref } from 'vue-demi'
 import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
-import { isClient, notNullish } from '@vueuse/shared'
+import { isClient } from '@vueuse/shared'
 
 import { useEventListener } from '../useEventListener'
 
@@ -22,6 +22,14 @@ export interface UseDropZoneOptions {
   onEnter?: (files: File[] | null, event: DragEvent) => void
   onLeave?: (files: File[] | null, event: DragEvent) => void
   onOver?: (files: File[] | null, event: DragEvent) => void
+  /**
+   * Allow multiple files to be dropped. Defaults to true.
+   */
+  multiple?: boolean
+  /**
+   * Prevent default behavior for unhandled events. Defaults to false.
+   */
+  preventDefaultForUnhandled?: boolean
 }
 
 export function useDropZone(
@@ -31,59 +39,92 @@ export function useDropZone(
   const isOverDropZone = ref(false)
   const files = shallowRef<File[] | null>(null)
   let counter = 0
-  let isDataTypeIncluded = true
+  let isValid = true
+
   if (isClient) {
     const _options = typeof options === 'function' ? { onDrop: options } : options
+    const multiple = _options.multiple ?? true
+    const preventDefaultForUnhandled = _options.preventDefaultForUnhandled ?? false
+
     const getFiles = (event: DragEvent) => {
       const list = Array.from(event.dataTransfer?.files ?? [])
-      return (files.value = list.length === 0 ? null : list)
+      return list.length === 0 ? null : (multiple ? list : [list[0]])
     }
 
-    useEventListener<DragEvent>(target, 'dragenter', (event) => {
-      const types = Array.from(event?.dataTransfer?.items || [])
-        .map(i => i.kind === 'file' ? i.type : null)
-        .filter(notNullish)
-
-      if (_options.dataTypes && event.dataTransfer) {
+    const checkDataTypes = (types: string[]) => {
+      if (_options.dataTypes) {
         const dataTypes = unref(_options.dataTypes)
-        isDataTypeIncluded = typeof dataTypes === 'function'
+        return typeof dataTypes === 'function'
           ? dataTypes(types)
           : dataTypes
             ? dataTypes.some(item => types.includes(item))
             : true
-        if (!isDataTypeIncluded)
-          return
       }
-      event.preventDefault()
-      counter += 1
-      isOverDropZone.value = true
-      const files = getFiles(event)
-      _options.onEnter?.(files, event)
-    })
-    useEventListener<DragEvent>(target, 'dragover', (event) => {
-      if (!isDataTypeIncluded)
-        return
-      event.preventDefault()
-      const files = getFiles(event)
-      _options.onOver?.(files, event)
-    })
-    useEventListener<DragEvent>(target, 'dragleave', (event) => {
-      if (!isDataTypeIncluded)
+      return true
+    }
+
+    const checkValidity = (event: DragEvent) => {
+      const items = Array.from(event.dataTransfer?.items ?? [])
+      const types = items
+        .filter(item => item.kind === 'file')
+        .map(item => item.type)
+
+      const dataTypesValid = checkDataTypes(types)
+      const multipleFilesValid = multiple || items.filter(item => item.kind === 'file').length <= 1
+
+      return dataTypesValid && multipleFilesValid
+    }
+
+    const handleDragEvent = (event: DragEvent, eventType: 'enter' | 'over' | 'leave' | 'drop') => {
+      isValid = checkValidity(event)
+
+      if (!isValid) {
+        if (preventDefaultForUnhandled) {
+          event.preventDefault()
+        }
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = 'none'
+        }
         return
+      }
+
       event.preventDefault()
-      counter -= 1
-      if (counter === 0)
-        isOverDropZone.value = false
-      const files = getFiles(event)
-      _options.onLeave?.(files, event)
-    })
-    useEventListener<DragEvent>(target, 'drop', (event) => {
-      event.preventDefault()
-      counter = 0
-      isOverDropZone.value = false
-      const files = getFiles(event)
-      _options.onDrop?.(files, event)
-    })
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy'
+      }
+
+      const currentFiles = getFiles(event)
+
+      switch (eventType) {
+        case 'enter':
+          counter += 1
+          isOverDropZone.value = true
+          _options.onEnter?.(null, event)
+          break
+        case 'over':
+          _options.onOver?.(null, event)
+          break
+        case 'leave':
+          counter -= 1
+          if (counter === 0)
+            isOverDropZone.value = false
+          _options.onLeave?.(null, event)
+          break
+        case 'drop':
+          counter = 0
+          isOverDropZone.value = false
+          if (isValid) {
+            files.value = currentFiles
+            _options.onDrop?.(currentFiles, event)
+          }
+          break
+      }
+    }
+
+    useEventListener<DragEvent>(target, 'dragenter', event => handleDragEvent(event, 'enter'))
+    useEventListener<DragEvent>(target, 'dragover', event => handleDragEvent(event, 'over'))
+    useEventListener<DragEvent>(target, 'dragleave', event => handleDragEvent(event, 'leave'))
+    useEventListener<DragEvent>(target, 'drop', event => handleDragEvent(event, 'drop'))
   }
 
   return {