Skip to content

docs(www): add note on file input with react hook form#1379

Open
zeekrey wants to merge 1 commit intoshadcn-ui:mainfrom
zeekrey:docs-file-input
Open

docs(www): add note on file input with react hook form#1379
zeekrey wants to merge 1 commit intoshadcn-ui:mainfrom
zeekrey:docs-file-input

Conversation

@zeekrey
Copy link
Copy Markdown

@zeekrey zeekrey commented Aug 29, 2023

Hey there! 👋🏻

Thank you so much for creating this amazing content! 😍 This is my first PR in this repository, so please let me know if anything is missing or can be improved.

Intention
While all the components worked perfectly, I encountered some difficulties when using the <Input /> component with type="file" and react hook forms. In my search for a solution, I came across these helpful discussions:

It seems that I'm not the first one to have these questions.

Solution
I made a small addition to the <Input /> file example and included a tiny code snippet. I didn't include zod, as it was straightforward to use z.instanceof(File).

I hope this is valuable. Please let me know if there's anything else I can do to make changes.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Aug 29, 2023

@zeekrey is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@edeuxk
Copy link
Copy Markdown

edeuxk commented Sep 14, 2023

Hello there !

You might change name="pricture" to name="picture"

And thank you very much for your PR, it saved me so much time.

@zeekrey
Copy link
Copy Markdown
Author

zeekrey commented Sep 15, 2023

Hello there !

You might change name="pricture" to name="picture"

And thank you very much for your PR, it saved me so much time.

That's fantastic that it helped! 🥳 I've corrected the typo. Thank you for the helpful hint.

@6abotage
Copy link
Copy Markdown

6abotage commented Mar 21, 2024

This information is still missing in the docs

@6abotage
Copy link
Copy Markdown

And after I checked now I think the reason your example works is because you're stopping the value from getting spread onto the Input, it therefore becomming uncontrolled. This feels like a work-around.

react-hook-form allows the mixed usage of controlled and uncontrolled components
https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents

@shadcn
Copy link
Copy Markdown
Collaborator

shadcn commented Mar 28, 2025

This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you.

@shadcn shadcn added the stale? Is this issue stale? label Mar 28, 2025
@HamedMP
Copy link
Copy Markdown

HamedMP commented May 19, 2025

i just solved it with the same onChange handler solution, would appreciate it to have it on the docs

@shadcn shadcn removed the stale? Is this issue stale? label Jun 18, 2025
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.

5 participants