Server actions: how to send a file from client to server using formdata?
Unanswered
denexapp posted this in #help-forum
denexappOP
Hello! I'm trying to send a file from the client to the server using server actions.
This is my code:
However, when I run it and see what's going on in the network tab of devtools, I see the multipart request, but the length of the file is 0, see the attached screenshot. So I don't know if I'm making something wrong or this is a React/Next.js bug. Any idea appreciated!
This is my code:
// client component
const onSend = async (file: File) => {
const formData = new FormData();
formData.append("image", file);
const result = await serverAction(formData);
console.log(result);
}However, when I run it and see what's going on in the network tab of devtools, I see the multipart request, but the length of the file is 0, see the attached screenshot. So I don't know if I'm making something wrong or this is a React/Next.js bug. Any idea appreciated!
5 Replies
denexappOP
Brown bear
you can do it like this
`
``import serverSideHandlingFunction from 'file for only Server side'
"use client"
<form action={serverSideHandlingFunction}>
</form>
///
create anthor file for server side and then
"use server";
export async function serverSideHandlingFunction(formData) {
// handle formData here
}`
don't ever use the server function in the same file with client side put them away from each other
denexappOP
I see, thank you. Is it possible to avoid using the form component?
Polar bear