Skip to content

Conversation

@kevingomes17
Copy link

Description

This PR adds folder upload support to the FileInput and FileDropzone components, enabling users to select and upload entire folders of files.

Key changes:

FileInput Component:

  • Added new mode prop ('file' | 'folder') to enable folder selection
  • When mode='folder', the component renders with the webkitdirectory attribute
  • Folder mode automatically enables multiple file selection regardless of the multiple prop
  • Files are filtered by accept criteria after selection (since native accept filtering doesn't work with webkitdirectory)

FileDropzone Component:

  • Added new accept prop to filter dropped files by type
  • Enhanced onDrop handler to recursively traverse dropped folders using DataTransferItem.webkitGetAsEntry() API
  • Supports mixed drops of files and folders, combining all files into a single array

Shared Utilities:

  • Created accept-filter.ts with file type filtering functions supporting extensions (.jpg, .png) and MIME types (image/*)
  • Created folder-traversal.ts with async folder traversal utilities

Type Declarations:

  • Added TypeScript declarations for webkitdirectory attribute and FileSystem API types in
    global.d.ts
  • Updated component definitions for documentation

Related links, issue #, if available: https://quip-amazon.com/0y0pAIzFG0mD/Folder-support-for-file-input-Tech-design

How has this been tested?

  • Unit tests pass for all modified components
  • Snapshot tests updated for component definitions
  • Manual testing of folder selection in FileInput with mode='folder'
  • Manual testing of folder drag-and-drop in FileDropzone

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@kevingomes17 kevingomes17 requested a review from a team as a code owner January 26, 2026 07:51
@kevingomes17 kevingomes17 requested review from ClaudioGSDB and removed request for a team January 26, 2026 07:51
@kevingomes17 kevingomes17 changed the title Added feature to upload folder. Initial import. feat: add folder upload support to FileInput and FileDropzone Jan 26, 2026
@codecov
Copy link

codecov bot commented Jan 26, 2026

Codecov Report

❌ Patch coverage is 30.30303% with 92 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.81%. Comparing base (e7feb35) to head (c1ef84d).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/internal/utils/accept-filter.ts 6.12% 41 Missing and 5 partials ⚠️
src/internal/utils/folder-traversal.ts 35.71% 44 Missing and 1 partial ⚠️
src/file-input/internal.tsx 87.50% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4207      +/-   ##
==========================================
- Coverage   97.16%   96.81%   -0.35%     
==========================================
  Files         879      881       +2     
  Lines       25749    25877     +128     
  Branches     9303     9338      +35     
==========================================
+ Hits        25018    25054      +36     
- Misses        725      770      +45     
- Partials        6       53      +47     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants