@aws-amplify/ui-react-core 3.0.29 → 3.0.30

package/dist/esm/hooks/useDropZone.mjs

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { isFunction } from '@aws-amplify/ui';
 import { filterAllowedFiles } from '../utils/filterAllowedFiles.mjs';
+import { processDroppedItems } from '../utils/processDroppedItems.mjs';
 
 function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes = [], }) {
     const [dragState, setDragState] = useState('inactive');
@@ -43,13 +44,21 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
         event.preventDefault();
         event.stopPropagation();
         setDragState('inactive');
-        const files = Array.from(event.dataTransfer.files);
-        const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        const { files, items } = event.dataTransfer;
         if (isFunction(_onDrop)) {
             _onDrop(event);
         }
-        if (isFunction(onDropComplete)) {
-            onDropComplete({ acceptedFiles, rejectedFiles });
+        const completeDrop = (files) => {
+            const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+            if (isFunction(onDropComplete)) {
+                onDropComplete({ acceptedFiles, rejectedFiles });
+            }
+        };
+        if (!items) {
+            completeDrop(Array.from(files));
+        }
+        else {
+            processDroppedItems(Array.from(items)).then(completeDrop);
         }
     };
     return {

package/dist/esm/utils/processDroppedItems.mjs

@@ -0,0 +1,66 @@
+// Helper function to convert FileSystemFileEntry to File
+const getFileFromEntry = (fileEntry) => {
+    return new Promise((resolve) => {
+        fileEntry.file(resolve);
+    });
+};
+// Helper function to read all entries in a directory
+const readAllDirectoryEntries = async (dirReader) => {
+    const entries = [];
+    let readBatch = [];
+    do {
+        readBatch = await new Promise((resolve, reject) => {
+            try {
+                dirReader.readEntries(resolve, reject);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+        entries.push(...readBatch);
+    } while (readBatch.length > 0);
+    return entries;
+};
+// Helper function to process files and folder contents
+async function processDroppedItems(dataTransferItems) {
+    const files = [];
+    const processFileSystemEntry = async (entry) => {
+        if (entry.isFile) {
+            const file = await getFileFromEntry(entry);
+            // drag and dropped files do not have a webkitRelativePath property,
+            // but they do have a fullPath property which has the same information
+            // https://github.com/ant-design/ant-design/issues/16426
+            if (entry.fullPath && !file.webkitRelativePath) {
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: true,
+                    },
+                });
+                // intentionally overwriting webkitRelativePath
+                // @ts-expect-error
+                file.webkitRelativePath = entry.fullPath.replace(/^\//, '');
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: false,
+                    },
+                });
+            }
+            files.push(file);
+        }
+        else if (entry.isDirectory) {
+            const dirReader = entry.createReader();
+            const dirEntries = await readAllDirectoryEntries(dirReader);
+            await Promise.all(dirEntries.map(processFileSystemEntry));
+        }
+    };
+    // Filter out and process files from the data transfer items
+    await Promise.all(dataTransferItems
+        .reduce((acc, item) => {
+        const entry = item.webkitGetAsEntry();
+        return item.kind === 'file' && entry ? [...acc, entry] : acc;
+    }, [])
+        .map(processFileSystemEntry));
+    return files;
+}
+
+export { processDroppedItems };

package/dist/index.js

@@ -726,6 +726,71 @@ function filterAllowedFiles(files, acceptedFileTypes) {
     return { acceptedFiles, rejectedFiles };
 }
 
+// Helper function to convert FileSystemFileEntry to File
+const getFileFromEntry = (fileEntry) => {
+    return new Promise((resolve) => {
+        fileEntry.file(resolve);
+    });
+};
+// Helper function to read all entries in a directory
+const readAllDirectoryEntries = async (dirReader) => {
+    const entries = [];
+    let readBatch = [];
+    do {
+        readBatch = await new Promise((resolve, reject) => {
+            try {
+                dirReader.readEntries(resolve, reject);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+        entries.push(...readBatch);
+    } while (readBatch.length > 0);
+    return entries;
+};
+// Helper function to process files and folder contents
+async function processDroppedItems(dataTransferItems) {
+    const files = [];
+    const processFileSystemEntry = async (entry) => {
+        if (entry.isFile) {
+            const file = await getFileFromEntry(entry);
+            // drag and dropped files do not have a webkitRelativePath property,
+            // but they do have a fullPath property which has the same information
+            // https://github.com/ant-design/ant-design/issues/16426
+            if (entry.fullPath && !file.webkitRelativePath) {
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: true,
+                    },
+                });
+                // intentionally overwriting webkitRelativePath
+                // @ts-expect-error
+                file.webkitRelativePath = entry.fullPath.replace(/^\//, '');
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: false,
+                    },
+                });
+            }
+            files.push(file);
+        }
+        else if (entry.isDirectory) {
+            const dirReader = entry.createReader();
+            const dirEntries = await readAllDirectoryEntries(dirReader);
+            await Promise.all(dirEntries.map(processFileSystemEntry));
+        }
+    };
+    // Filter out and process files from the data transfer items
+    await Promise.all(dataTransferItems
+        .reduce((acc, item) => {
+        const entry = item.webkitGetAsEntry();
+        return item.kind === 'file' && entry ? [...acc, entry] : acc;
+    }, [])
+        .map(processFileSystemEntry));
+    return files;
+}
+
 function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes = [], }) {
     const [dragState, setDragState] = React.useState('inactive');
     const onDragStart = (event) => {
@@ -767,13 +832,21 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
         event.preventDefault();
         event.stopPropagation();
         setDragState('inactive');
-        const files = Array.from(event.dataTransfer.files);
-        const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        const { files, items } = event.dataTransfer;
         if (ui.isFunction(_onDrop)) {
             _onDrop(event);
         }
-        if (ui.isFunction(onDropComplete)) {
-            onDropComplete({ acceptedFiles, rejectedFiles });
+        const completeDrop = (files) => {
+            const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+            if (ui.isFunction(onDropComplete)) {
+                onDropComplete({ acceptedFiles, rejectedFiles });
+            }
+        };
+        if (!items) {
+            completeDrop(Array.from(files));
+        }
+        else {
+            processDroppedItems(Array.from(items)).then(completeDrop);
         }
     };
     return {

package/dist/types/utils/processDroppedItems.d.ts

@@ -0,0 +1 @@
+export declare function processDroppedItems(dataTransferItems: DataTransferItem[]): Promise<File[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.0.29",
+  "version": "3.0.30",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -40,7 +40,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.6.5",
+    "@aws-amplify/ui": "6.6.6",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.43.5",

package/src/hooks/useDropZone.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { isFunction } from '@aws-amplify/ui';
 import { filterAllowedFiles } from '../utils/filterAllowedFiles';
+import { processDroppedItems } from '../utils/processDroppedItems';
 
 interface DragEvents {
   onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
@@ -85,17 +86,27 @@ export default function useDropZone({
     event.preventDefault();
     event.stopPropagation();
     setDragState('inactive');
-    const files = Array.from(event.dataTransfer.files);
-    const { acceptedFiles, rejectedFiles } = filterAllowedFiles<File>(
-      files,
-      acceptedFileTypes
-    );
+
+    const { files, items } = event.dataTransfer;
 
     if (isFunction(_onDrop)) {
       _onDrop(event);
     }
-    if (isFunction(onDropComplete)) {
-      onDropComplete({ acceptedFiles, rejectedFiles });
+
+    const completeDrop = (files: File[]) => {
+      const { acceptedFiles, rejectedFiles } = filterAllowedFiles<File>(
+        files,
+        acceptedFileTypes
+      );
+      if (isFunction(onDropComplete)) {
+        onDropComplete({ acceptedFiles, rejectedFiles });
+      }
+    };
+
+    if (!items) {
+      completeDrop(Array.from(files));
+    } else {
+      processDroppedItems(Array.from(items)).then(completeDrop);
     }
   };
 

package/src/utils/processDroppedItems.ts

@@ -0,0 +1,79 @@
+// Helper function to convert FileSystemFileEntry to File
+const getFileFromEntry = (fileEntry: FileSystemFileEntry): Promise<File> => {
+  return new Promise((resolve) => {
+    fileEntry.file(resolve);
+  });
+};
+
+// Helper function to read all entries in a directory
+const readAllDirectoryEntries = async (
+  dirReader: FileSystemDirectoryReader
+): Promise<FileSystemEntry[]> => {
+  const entries: FileSystemEntry[] = [];
+
+  let readBatch: FileSystemEntry[] = [];
+  do {
+    readBatch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+      try {
+        dirReader.readEntries(resolve, reject);
+      } catch (error) {
+        reject(error);
+      }
+    });
+    entries.push(...readBatch);
+  } while (readBatch.length > 0);
+
+  return entries;
+};
+
+// Helper function to process files and folder contents
+export async function processDroppedItems(
+  dataTransferItems: DataTransferItem[]
+): Promise<File[]> {
+  const files: File[] = [];
+
+  const processFileSystemEntry = async (
+    entry: FileSystemEntry
+  ): Promise<void> => {
+    if (entry.isFile) {
+      const file = await getFileFromEntry(entry as FileSystemFileEntry);
+      // drag and dropped files do not have a webkitRelativePath property,
+      // but they do have a fullPath property which has the same information
+      // https://github.com/ant-design/ant-design/issues/16426
+      if (entry.fullPath && !file.webkitRelativePath) {
+        Object.defineProperties(file, {
+          webkitRelativePath: {
+            writable: true,
+          },
+        });
+
+        // intentionally overwriting webkitRelativePath
+        // @ts-expect-error
+        file.webkitRelativePath = entry.fullPath.replace(/^\//, '');
+
+        Object.defineProperties(file, {
+          webkitRelativePath: {
+            writable: false,
+          },
+        });
+      }
+      files.push(file);
+    } else if (entry.isDirectory) {
+      const dirReader = (entry as FileSystemDirectoryEntry).createReader();
+      const dirEntries = await readAllDirectoryEntries(dirReader);
+      await Promise.all(dirEntries.map(processFileSystemEntry));
+    }
+  };
+
+  // Filter out and process files from the data transfer items
+  await Promise.all(
+    dataTransferItems
+      .reduce<FileSystemEntry[]>((acc, item) => {
+        const entry = item.webkitGetAsEntry();
+        return item.kind === 'file' && entry ? [...acc, entry] : acc;
+      }, [])
+      .map(processFileSystemEntry)
+  );
+
+  return files;
+}