Skip to content

feat [PKTS-221]: add file input react component - #91

Open
charleshtrenholm wants to merge 1 commit into
developfrom
feat/pkts-221-input-file-react
Open

feat [PKTS-221]: add file input react component#91
charleshtrenholm wants to merge 1 commit into
developfrom
feat/pkts-221-input-file-react

Conversation

@charleshtrenholm

Copy link
Copy Markdown
Collaborator
image

Adds InputFile component with css to react components. Optionally can be styled as either a drag and drop handler or a button that can be clicked. Props extend native <input type="file"> prop types, refer to PktsInputFile.types.ts to see additional props that are custom to component

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 21, 2026

Copy link
Copy Markdown

Deploying packets-design-system-staging with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8621d36
Status: ✅  Deploy successful!
Preview URL: https://eae46cad.packets-design-system-staging.pages.dev
Branch Preview URL: https://feat-pkts-221-input-file-rea.packets-design-system-staging.pages.dev

View logs

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 21, 2026

Copy link
Copy Markdown

Deploying packets-design-system with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8621d36
Status: ✅  Deploy successful!
Preview URL: https://67ae4c3e.packets-design-system.pages.dev
Branch Preview URL: https://feat-pkts-221-input-file-rea.packets-design-system.pages.dev

View logs

@charleshtrenholm
charleshtrenholm force-pushed the feat/pkts-221-input-file-react branch 4 times, most recently from 5ea45a8 to 64fdaeb Compare July 21, 2026 22:57

@FreddKM FreddKM left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this. The drag-and-drop file removal logic is a nice touch and the component API feels clean. I left a few comments around file naming consistency, some edge cases with ref forwarding and maxFiles enforcement, and spacing tokens in the CSS. Nothing major, mostly bringing it in line with patterns we use across the rest of the system.

Comment thread packages/ui-react/src/components/PktsInputFile/PacketsInputFile.tsx Outdated
Comment thread packages/ui-react/src/components/PktsInputFile/PktsInputFile.tsx
Comment thread packages/ui-react/src/components/PktsInputFile/PacketsInputFile.tsx Outdated
Comment thread apps/react-docs/src/stories/PktsInputFile.stories.tsx
Comment thread packages/ui-react/src/components/PktsInputFile/index.ts Outdated
@charleshtrenholm
charleshtrenholm force-pushed the feat/pkts-221-input-file-react branch from 64fdaeb to 8621d36 Compare July 30, 2026 22:20
@charleshtrenholm
charleshtrenholm requested a review from FreddKM July 30, 2026 22:20
@charleshtrenholm

Copy link
Copy Markdown
Collaborator Author

Thanks for your review @FreddKM ! Ready for re review whenever 👌

@FreddKM FreddKM left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work. Approving as-is. A few CSS conventions I missed on the first pass to clean up in a follow up ticket (spacing tokens, prefixed modifier classes, dark mode) but nothing blocking.

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