Shadcn <Form> (react-hook-forms) + Server Actions + File Upload

[alpine rain]

Looking to see if anyone has had success with getting Shadcn's Form component working when it comes to file uploads for a form that is utilizing a for action to a separate server component. I feel as though I'm coding around a Rubik's cube. Either the way I pass the formData from client to server is not allowed or it is but since the payload is a fileList, File or other types that those values cannot be passed to a server component.

I can share my example but curious if anyone has some exp with this pattern. I've done some searching but seems like a lightly covered combo when you include the need for a file upload.

[light sequoia]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lapis berry]

Either the way I pass the formData from client to server is not allowed or it is but since the payload is a fileList, File or other types that those values cannot be passed to a server component
Not sure how you did that but you can definetly upload a file to a server action

your file needs to be in a formData and that formData needs to be passed to a server action

furthermore, one other pattern that doesnt involve passing file to a server action is to just upload the file directly to a storage server. This is possible by a presigned url that allows temporary access to upload file.

this way you dont have to worry about the server action payload limit (2.5MB iirc, i forgot)