chore: fix dropzone handler to preserve folder structure for dropped …

…files (#6151) * chore: fix issue where drag and drop doesn't respect folder structure * chore: add tests for webkitRelativePath * chore: bump size limit for storage
aws-amplify · Nov 19, 2024 · 9f4fc4e · 9f4fc4e
1 parent 0d4d2b9
commit 9f4fc4e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/packages/react-core/src/utils/__tests__/processDroppedEntries.spec.tsx b/packages/react-core/src/utils/__tests__/processDroppedEntries.spec.tsx
@@ -8,7 +8,7 @@ describe('processDroppedItems', () => {
     isFile: true,
     isDirectory: false,
     name: file.name,
-    fullPath: `/${file.name}`,
+    fullPath: `path/${file.name}`,
     filesystem: {
       name: 'temporary',
       root: {} as FileSystemDirectoryEntry,
@@ -96,6 +96,7 @@ describe('processDroppedItems', () => {
     expect(result).toHaveLength(2);
     expect(result[0].name).toBe('dir-file1.txt');
     expect(result[1].name).toBe('dir-file2.txt');
+    expect(result[0].webkitRelativePath).toBe('path/dir-file1.txt');
   });
 
   it('should process mixed files and directories', async () => {
@@ -117,6 +118,28 @@ describe('processDroppedItems', () => {
     expect(result.map((f) => f.name)).toContain('single.txt');
     expect(result.map((f) => f.name)).toContain('dir-file1.txt');
     expect(result.map((f) => f.name)).toContain('dir-file2.txt');
+    expect(result[1].webkitRelativePath).toBe('path/dir-file1.txt');
+  });
+
+  it('should not overwrite webkitRelativePath if present', async () => {
+    const singleFile = new File([mockFileData], 'single.txt', {
+      type: 'text/plain',
+    });
+    Object.defineProperties(singleFile, {
+      webkitRelativePath: {
+        writable: true,
+      },
+    });
+    // intentionally overwriting webkitRelativePath
+    // @ts-expect-error
+    singleFile.webkitRelativePath = 'webkitpath/single.txt';
+
+    const items = [createMockDataTransferItem(createMockFileEntry(singleFile))];
+
+    const result = await processDroppedItems(items);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].webkitRelativePath).toBe('webkitpath/single.txt');
   });
 
   it('should handle empty items array', async () => {

diff --git a/packages/react-core/src/utils/processDroppedItems.ts b/packages/react-core/src/utils/processDroppedItems.ts
@@ -37,6 +37,26 @@ export async function processDroppedItems(
   ): 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();

diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json
@@ -57,7 +57,7 @@
       "name": "FileUploader",
       "path": "dist/esm/index.mjs",
       "import": "{ FileUploader }",
-      "limit": "21.6 kB"
+      "limit": "22 kB"
     },
     {
       "name": "StorageImage",
@@ -69,7 +69,7 @@
       "name": "StorageManager",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageManager }",
-      "limit": "21.6 kB"
+      "limit": "22 kB"
     }
   ]
 }