@veracity/vui 2.24.0-beta.0 → 2.24.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.24.0-beta.0",
+  "version": "2.24.0-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/dragAndDrop/dragAndDrop.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, DragEvent, useRef } from 'react'
+import { ChangeEvent, DragEvent, useRef } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, v, vui } from '../core'
 import Icon, { IconProp } from '../icon'
@@ -36,10 +36,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const fileInput = useRef<HTMLInputElement>(null)
   const styles = useStyleConfig('DragAndDrop', props)
 
-  const processFiles = (files: FileList): File[] => {
-    console.log('files', files)
-    return Array.from(files).map(file => file)
-  }
+  const processFiles = (files: FileList): File[] => Array.from(files).map(file => file)
 
   const handleFileInput = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
@@ -53,9 +50,51 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
     }
   }
 
+  const getFilesWebkitDataTransferItems = (dataTransferItems: DataTransferItemList): Promise<File[]> => {
+    const traverseFileTreePromise = (item: FileSystemEntry, path: string = ''): Promise<File[]> =>
+      new Promise(resolve => {
+        if (item.isFile) {
+          const fileEntry = item as FileSystemFileEntry
+          fileEntry.file(file => {
+            ;(file as any).filepath = path + file.name // Save full path with type casting
+            files.push(file)
+            resolve([file])
+          })
+        } else if (item.isDirectory) {
+          const dirEntry = item as FileSystemDirectoryEntry
+          const dirReader = dirEntry.createReader()
+          dirReader.readEntries(entries => {
+            const entriesPromises: Promise<File[]>[] = entries.map(entry =>
+              traverseFileTreePromise(entry, path + dirEntry.name + '/'),
+            )
+            resolve(Promise.all(entriesPromises).then(entries => [].concat(...(entries as any[]))))
+          })
+        }
+      })
+
+    const files: File[] = []
+    return new Promise((resolve, reject) => {
+      const entriesPromises: Promise<File[]>[] = []
+      for (let i = 0; i < dataTransferItems.length; i++) {
+        const item = dataTransferItems[i].webkitGetAsEntry()
+        if (item) entriesPromises.push(traverseFileTreePromise(item))
+      }
+      Promise.all(entriesPromises)
+        .then(() => resolve(files))
+        .catch(reject)
+    })
+  }
+
   const handleDrop = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
     if (disabled) return undefined
+
+    if (isFolderUpload) {
+      const items = e.dataTransfer.items
+      getFilesWebkitDataTransferItems(items).then(files => files?.length && onFilesAdded?.(files))
+      return undefined
+    }
+
     const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : []
     if (files?.length) onFilesAdded?.(files)
   }