Server Validation With Next.js and form input
Hello,
I have a question about implementing server actions in Next.js when working with file inputs. I'm currently building a form that allows multiple file uploads, managed via a separate (unrelated) component.
The issue I'm facing is that while the form state correctly holds the file data and client-side validation passes, the file ends up being empty during server-side validation. This seems to happen because the actual file input element was never directly changed by the user, so its native value isn't included in the form submission.
Ideally, I'd like to send the form state (which includes the file) to the server instead of relying solely on the native input's value. My current workaround involves toggling a hidden input field based on whether there's a file, but it feels hacky.
Previously, I tried programmatically pushing values into the form on change, but it appears that server validation only receives values from real input elements, not ones added dynamically to the form state.
Can I submit that value for server validation if there is no real input tied to it.
ex :
form.pushFieldValue('files', { file, name: name }) would be passed to my
onServerValidate function on submit. Right now it only work when there is a dedicated input to it
TLDR
Is it possible to send the current form state to a server action using useActionState, even if there's no corresponding real input element for that value?0 Replies