@veracity/vui 2.23.0 → 2.24.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.23.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'
@@ -23,8 +23,9 @@ const DragAndDropBase = styled.labelBox`
 export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const {
     accept,
-    icon = defaultIcon,
     className,
+    icon = defaultIcon,
+    isFolderUpload,
     onFilesAdded,
     multiple = true,
     text = defaultText,
@@ -49,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)
   }
@@ -76,14 +119,15 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
           {text}
         </T>
       )}
-      <v.input
+      <input
         accept={accept}
         className="vui-drag-and-drop-hidden-input"
-        display="none"
         multiple={multiple}
         onChange={handleFileInput}
         ref={fileInput}
+        style={{ display: 'none' }}
         type={inputType}
+        {...(isFolderUpload && { webkitdirectory: 'true', directory: 'true' })}
       />
     </DragAndDropBase>
   )

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -10,6 +10,8 @@ export type DragAndDropProps = Omit<BoxProps, 'variant'> &
     disabled?: boolean
     /** The message icon. @default `falCloudUpload` */
     icon?: IconProp
+    /** Allow folder upload @default `false` */
+    isFolderUpload?: boolean
     /** Allows to select multiple files when the drop zone is clicked.. @default `true` */
     multiple?: boolean
     /** The message text. @default `Click or drag files to this area` */