Shadcn <Form> (react-hook-forms) + Server Actions + File Upload
Unanswered
Sweat bee posted this in #help-forum
Sweat beeOP
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.
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.
4 Replies
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 componentNot 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 actionfurthermore, 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)
this way you dont have to worry about the server action payload limit (2.5MB iirc, i forgot)
Sweat beeOP
I've taken a few approaches but the main two were a form action call to the server action in a dedicated ts file. or passing the formData to an onSubmit handler that performs some Zod validation before passing to the server action. (also have tried Zod on the server too)
In both cases i seem to get the Next error that only certain data types work with server actions.
For my use case I'm using Supabase, I believe they have pre-signed urls but they don't suggest them since their SDK can handle this action to the bucket storage.
This upload would just be for profile pictures or other picture items that will be restricted to under 1 MB max anyways.
In both cases i seem to get the Next error that only certain data types work with server actions.
For my use case I'm using Supabase, I believe they have pre-signed urls but they don't suggest them since their SDK can handle this action to the bucket storage.
This upload would just be for profile pictures or other picture items that will be restricted to under 1 MB max anyways.