fix(web): recursively traverse subdirectories on folder drop in Drives drawer

[pranjali2076]

Fixes #5626

Summary

• What changed? Added getFilesFromDataTransfer helper using webkitGetAsEntry() to recursively extract files from nested directories on drag-and-drop. Updated useDriveDrop (folderDropProps, containerDropProps) and useStageDrop in useDriveDrop.ts to handle async file extraction.
• Why was this change needed? Dropping a folder into the Drives drawer previously uploaded folders as 0-byte pseudo-files rather than uploading their contents.
• What problem does it solve? Ensures that dropping folders recursively extracts and uploads all contained files, matching the behavior in AgentConversation.tsx.
• Root cause address: Replaced direct e.dataTransfer.files array access with webkitGetAsEntry() directory tree traversal.

Testing

Verified locally

• Verified directory traversal implementation in useDriveDrop.ts.

Added or updated tests

N/A

QA follow-up

N/A

Demo

Checklist

• I have included a video or screen recording for UI changes, or marked Demo as N/A
• Relevant tests pass locally
• Relevant linting and formatting pass locally
• I have signed the CLA, or I will sign it when the bot prompts me

[vercel]

@pranjali2076 is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ Thanks @pranjali2076! This PR now meets the contribution requirements and has been reopened. A maintainer will review it soon.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: efabef4f-f56b-4aae-ad3f-20569fbb7c80

📥 Commits

Reviewing files that changed from the base of the PR and between 5a01140 and dfae824.

📒 Files selected for processing (1)

• web/oss/src/components/Drives/useDriveDrop.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• web/oss/src/components/Drives/useDriveDrop.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added support for dropping entire folders and nested directory structures.
  • Preserves relative folder paths during drag-and-drop uploads, keeping files organized.
  • Supports asynchronous extraction of files from dropped items across supported upload areas.
  • Improved handling of mixed file and folder drops.
  • Added compatibility for drag-and-drop sources that provide files directly, ensuring uploads continue when folder details are unavailable.
  • Existing hover, loading, active-state, and upload behavior remains unchanged.

Walkthrough

Dropped directories are recursively enumerated through DataTransferItem entries. Extracted files retain relative paths. Folder, container, and stage drop handlers use the shared asynchronous extractor.

Changes

Drive drop extraction

Layer / File(s)	Summary
DataTransfer extraction and event contracts web/oss/src/components/Drives/useDriveDrop.ts	Adds recursive directory traversal, relative-path preservation, fallback file extraction, and explicit drag-event types.
Folder and container drop integration web/oss/src/components/Drives/useDriveDrop.ts	Folder and container drops asynchronously extract files before upload.
Stage drop integration and handler shape web/oss/src/components/Drives/useDriveDrop.ts	Stage drops use the shared extractor, and FileDropProps accepts partial handler sets.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant DropHandler
  participant getFilesFromDataTransfer
  participant UploadFlow

  User->>DropHandler: drop files or a directory
  DropHandler->>getFilesFromDataTransfer: extract DataTransfer items
  getFilesFromDataTransfer-->>DropHandler: return files with relative paths
  DropHandler->>UploadFlow: upload extracted files

Loading

Possibly related PRs

• Agenta-AI/agenta#5459: Introduced related utilities in useDriveDrop.ts.
• Agenta-AI/agenta#5570: Also modifies the Drives drag-and-drop upload flow.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the fix for recursive subdirectory traversal during folder drops in the Drives drawer.
Description check	✅ Passed	The description explains the folder-drop bug, the recursive extraction change, the affected handlers, and the expected behavior.
Linked Issues check	✅ Passed	The changes address issue #5626 by recursively enumerating directories, extracting files, preserving relative paths, and updating all three drop flows.
Out of Scope Changes check	✅ Passed	The summarized changes are limited to Drives drag-and-drop extraction and related TypeScript handler types required for the folder-drop fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

web/oss/src/components/Drives/useDriveDrop.ts (1)

38-79: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider typed FileSystemEntry variants instead of any.

entry: any, batch: any[], and item as any bypass type checking throughout the traversal. Modern TypeScript exposes webkitGetAsEntry(): FileSystemEntry | null on DataTransferItem, and FileSystemFileEntry/FileSystemDirectoryEntry/FileSystemDirectoryReader types exist via @types/wicg-entries-api or newer TS DOM lib updates. Please verify whether these types are already available in this project's TypeScript/DOM lib setup before adopting them, since full File-and-Directory-Entries typings are not guaranteed in stock lib.dom.d.ts.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 68a0729e-3de0-431d-b0c1-ebb5e1b213e9

📥 Commits

Reviewing files that changed from the base of the PR and between 7e9206e and 5a01140.

📒 Files selected for processing (1)

• web/oss/src/components/Drives/useDriveDrop.ts

[ashrafchowdury]

Thanks for this @pranjali2076 — closing as superseded: #5635 landed the same webkitGetAsEntry() traversal (plus batched readEntries + unit tests) shortly after you opened this. Appreciate you jumping on it!