Server Action Doesnt Get triggred while uploading a file
Answered
Skipjack tuna posted this in #help-forum
Skipjack tunaOP
I am trying to perform a upload form from my client component and then send the submission in a server action but server action is not getting triggred
Answered by Ray
try this
<form
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget)
formData.append("assignmentid", assignmentid)
form.handleSubmit(async () => {
const res = await handleSubmit(formData)
})(e);
}}>
</form>144 Replies
Skipjack tunaOP
Only error i get in the browser console
@Skipjack tuna https://pastebin.com/cFvwepyA
can you use a github repo instead of pastebin
@!=tgt can you use a github repo instead of pastebin
Skipjack tunaOP
my project is close source
@Skipjack tuna my project is close source
where is the server action being invoked
send the server action
@!=tgt where is the server action being invoked
Skipjack tunaOP
from another file
oh hold on
what file did you send in the pastebin
@!=tgt send the server action
Skipjack tunaOP
"use server";
import { createClient } from "@/utils/supabase/server";
import { revalidatePath } from "next/cache";
export async function handleSubmits({ project, assignementid }) {
console.log("Hello")
return true;
}@!=tgt what file did you send in the pastebin
Skipjack tunaOP
the client side
hmm
Skipjack tunaOP
i didnt understood what promise i am missing here :)there one more thing i wanna add
there is an active gh issue for react-hook-form not working with server actions but there is a way to fix it
also
the console.log in ther server action will log in your terminal
not the browser console
the console.log in ther server action will log in your terminal
not the browser console
Skipjack tunaOP
When i use the 🔴 marked circle "field" value in place of 🟢 marked circle instead of "fileRef" the server action does invokes
@!=tgt ^^
but
the form data become empty :)
🤔
do you really need hook form?
you could just use a normal
you could just use a normal
<form> elementSkipjack tunaOP
@!=tgt do you really *need* hook form?
you could just use a normal `<form>` element
Skipjack tunaOP
Form Validation :)
i was using Zod
@Skipjack tuna <:galactic_relifed:767753337302941698>
Form Validation :)
zod doesn't need react-hook-form
the zod schema can be in the action
and you can do something like
"use server"
import {z} from "zod"
const schema = z.object({
name: z.string().min(1, "Name cannot be blank"),
email: z.string().email().min(1, "Email cannot be blank"),
});
export default async function contactAction(_prevState: any, params: FormData) {
const validation = schema.safeParse({
name: params.get("name"),
email: params.get("email"),
});
}@!=tgt and you can do something like
ts
"use server"
import {z} from "zod"
const schema = z.object({
name: z.string().min(1, "Name cannot be blank"),
email: z.string().email().min(1, "Email cannot be blank"),
});
export default async function contactAction(_prevState: any, params: FormData) {
const validation = schema.safeParse({
name: params.get("name"),
email: params.get("email"),
});
}
Skipjack tunaOP
in the action? and how can i throw error if any valadtion requirements doesnt meet?
return an error
from the action
and then in the client side
handle it accordingly
@!=tgt you can
Skipjack tunaOP
can't i use zod from client side?
i thought of just using input field
@Skipjack tuna can't i use zod from client side?
you could also run safeParse before calling the server action
in client side
thats an option too
@!=tgt thats an option too
Skipjack tunaOP
in the submit function?
@!=tgt yeah
Skipjack tunaOP
There is really an issue is server action that needs to be fixed can u share that issue link that u said
Even if i try this simple code it doesnt work
no console log ouput
just from the browser we get this
@Skipjack tuna There is really an issue is server action that needs to be fixed can u share that issue link that u said
it's specific to react-hook-form
@!=tgt it's specific to react-hook-form
Skipjack tunaOP
Hm but see my above ss it happens with normal input feild too
Doesn't make any sense thoo
Its more like server action cant take file upload issue
American Crow
the server action you posted is named
handleSubmits you are importing handleSubmit (no s). it's not that is it?@American Crow the server action you posted is named `handleSubmits` you are importing `handleSubmit` (no s). it's not that is it?
Skipjack tunaOP
Nah nah that just different ss
Ik that issue
That simple issue next js show us anyway
Ig i got to know where i miss
I am not sure tomorrow i will test
Skipjack tunaOP
OHHHHHMAYYYYGWAAAAD
Finally it worked
async function onSubmit({ project }) {
const req = await handleSubmit({ project, assignementid });
}
this solved the issue
Skipjack tunaOP
oh no not
it did called the function but when it return undefined
@Skipjack tuna it did called the function but when it return undefined
could you show the code on
handleSubmit?@Ray could you show the code on `handleSubmit`?
Skipjack tunaOP
No output in my CLI
@Skipjack tuna Click to see attachment
you didn't return anything
what do you mean nothing?
you didn't await
handleSubmit@Ray what do you mean nothing?
Skipjack tunaOP
No output in the console
and not assigning a value from the return
@Ray and not assigning a value from the return
Skipjack tunaOP
Still nothing
@Skipjack tuna Still nothing
the return from server action is logged on browser console
please check there
@Ray the return from server action is logged on browser console
Skipjack tunaOP
Nope
if the server action really got executed
then it wud print hi first in the console ig
where do you use
onSubmitSkipjack tunaOP
line 62
then should be your form didn't pass the validation
@Ray then should be your form didn't pass the validation
Skipjack tunaOP
yes bro it did
:)
but the server action doesnt executes
that's the issue
async function onSubmit({ project }) {
console.log('submitting')
const req = await handleSubmit({ project, assignementid });
}
console.log('submitting')
const req = await handleSubmit({ project, assignementid });
}
add a console.log here
Skipjack tunaOP
check network tab
do you see a POST request
@Ray do you see a POST request
Skipjack tunaOP
Nope
somehow that's not working
what next version are you using?
@Ray what next version are you using?
Skipjack tunaOP
"next": "14.1.3",no idea, need to see the repo
it works for me last time I use it
@Ray it works for me last time I use it
Skipjack tunaOP
You replicate the same :)
I am trying to upload a file using server action from a client component and also using form validation which uses zod and i am using react-hooks-form
I am trying to upload a file using server action from a client component and also using form validation which uses zod and i am using react-hooks-form
share the code, Im not gonna start it without code
the client component
"use server";
export async function handleSubmit({ project, assignementid }) {
console.log("Hi")
return true;
}the server action side
Parent component
try this
const res = await handleSubmit({ assignmentid });it is gonna be a problem if project is a file
@Ray try this
`const res = await handleSubmit({ assignmentid });`
try this to see if it works
yeah because you can't send the file object directly
Skipjack tunaOP
tho
it make sencse
Skipjack tunaOP
so do i need to send in buffer
?
no, send with FormData
file object and buffer are not serializable with react
const formData = new FormData()
formData.append("project", project)
formData.append("assignmentid", assignmentid)
const res = await handleSubmit(formData)then in your action
export async function handleSubmit(formData: FormData) {
const file = formData.get("project") as File
const assignmentid = formData.get("assignmentid")
}@Ray then in your action
ts
export async function handleSubmit(formData: FormData) {
const file = formData.get("project") as File
const assignmentid = formData.get("assignmentid")
}
Skipjack tunaOP
Yes, and how can i get the file info it shows me [ object Object ]
now i have to upload the file to supabase
const file = formData.get("project") should give you an instance of File
it gives me this
try this
<form
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget)
formData.append("assignmentid", assignmentid)
form.handleSubmit(async () => {
const res = await handleSubmit(formData)
})(e);
}}>
</form>Answer
then in your action
export async function handleSubmit(formData: FormData) {
const file = formData.get("file")
const assignmentid = formData.get("assignmentid")
}Skipjack tunaOP
Ok problem solved
thank you very much
💗
np
Skipjack tunaOP
lmao
lol i thought you are not gonna mark it
@Ray lol i thought you are not gonna mark it
Skipjack tunaOP
🤧 i read that embed so i thought whoever gonna solve it i am gonna mark it cuz it helps other too and after next js made it linked to their form site it quite helpful
nvm thank you again