Next.js Discord

Discord Forum

Send image from client component to server action

Answered
AM posted this in #help-forum
Open in Discord
AMOP
So i have following setup:

In client component submit function:

  async function onSubmit(values: UploadImageSchemaType) {
    console.log('val', values);
    try {
      startTransition(async () => {
        // JSON.parse(JSON.stringify(values.image))
        // JSON.stringify(JSON.parse(values.image))  
        const formData = new FormData();
        formData.append('image', values.image);
        await uploadPfpAction(formData);
      });
    } catch (err) {
      console.log('err', err);
    }
  }


inside the action:

export async function uploadPfpAction(data: FormData) {
  const image = data.get('image') as File;

  console.log('image', image);
}


problem is that in the action image is loosing all of the props, no name, no size no toArrayBuffer(), they do exists in submit function, any ideas how to provide the file to the Action successfully?
Answered by Ray
formData.append('image', values.image[0]);
i guess
View full answer

3 Replies