App Router: File Upload File objects are not supported

[Rykuno]

When attempting to to send a file from a Client Component to a Server Action I recieve the following error.

Only plain objects can be passed to Client Components from Server Components. File objects are not supported.

export default function Home() {
  const [pending, startTransition] = useTransition();
  const [file, setFile] = useState<File | null>(null);

  const handleSubmit = () => {
    startTransition(() => uploadImage(file));
  };

  return (
    <main className="flex p-24">
      <Input type="file" onChange={e => setFile(e.target?.files[0])} />
      <Button onClick={handleSubmit}>Upload</Button>
    </main>
  );
}

What is the recommended way to send a file to a server actions if its unable to serialize a file instead of utilizing a route.

[icyJoseph]

What I tried first

With this use client page component:

"use client";
import { uploadFile } from "./actions";

export default function Home() {
  return (
    <form className="flex flex-col items-end">
      <input name="fileUpload" type="file" />
      <button
        className="text-white bg-blue-700 p-2 rounded"
        formAction={uploadFile}
      >
        Upload!
      </button>
    </form>
  );
}

And this action:

"use server";

export async function uploadFile(data: FormData) {
  const file = data.get("fileUpload");
  console.log(file);
}

I get this:

Screen.Recording.2023-05-26.at.07.36.55.mov

A fix for your situation

So that means that in your case the problem is that you are not passing a FormData object into your uploadImage handler, rather, and as expected, this is serialized.

In the fetch API when you pass FormData object, binary transwer is allowed through the multipart/form-data content-type.

Do this modification:

"use client";
import { useState, useTransition } from "react";
import { uploadFile } from "./actions";

export default function Home() {
  const [pending, startTransition] = useTransition();
  const [file, setFile] = useState<File>();

  const handleSubmit = () => {
    if (!file) return;

    const form = new FormData();

    form.append("fileUpload", file);
    startTransition(() => uploadFile(form));
  };

  return (
    <main className="flex p-24">
      <input
        type="file"
        onChange={(e) => setFile(e.target?.files?.[0])}
      />
      <button onClick={handleSubmit}>Upload</button>
    </main>
  );
}

I'd recommend using a form as well.

Lastly, you need to adapt your uploadImage function to take in a FormData object as input, and from there you read the key you care about. See my server action implementation up above.

[Rykuno]

Wow what a fantastic answer; thank you for taking the time to answer this question. I kinda figured the FormData route was what was intended and the serialization makes sense.

When utilizing formData.get("file") on the sever It creates it in a File Like data type which S3 is not fond of. I'll read more up about that though.

Thanks!!!

[elbracht]

@Rykuno I have the same problem that I can't upload the file to S3 on the server. Have you found a solution here?

[masadamsahid]

@elbracht you probably can follow the blog/youtube tutorial from Sam Meech-Ward bellow:

• https://www.sammeechward.com/storing-images-in-s3-from-node-server
• https://www.youtube.com/watch?v=eQAIojcArRY

[Mohammad-Shahid-07]

how can i get the file path because the formData.get("file") only provieds file size and type only i want to upload the image to telegram

[zeekrey]

The approach provided by @icyJoseph works - thanks for that! 👍 But it causes a lot of headache in my project due to adjustments regarding types and validation. It would be awesome if there were another way.