continuing-cyan

Passing formdata with file to server function but file disappears

Hi there I have a image uploader in my app that uses a hook to pass the data to a server function but when I try to pass the the formdata to the serverfunction, my function's validator tells me that the file is missing "Missing or invalid file". I am not sure what I am doing wrong:

// snippet
const formData = new FormData();
            formData.append("file", file);
            formData.append("directory", directory);
            for (const [key, value] of formData.entries()) {
                console.log(key, value);
            }
            // Upload using server function
            const result = await uploadFile({ data: formData });

// snippet
const formData = new FormData();
            formData.append("file", file);
            formData.append("directory", directory);
            for (const [key, value] of formData.entries()) {
                console.log(key, value);
            }
            // Upload using server function
            const result = await uploadFile({ data: formData });

server function:

export const uploadFile = createServerFn({ method: "POST" })
    .validator((formData: FormData) => {
        if (!(formData instanceof FormData)) {
            throw new Error("Invalid form data");
        }

        const file = formData.get("file") as File;
        const directory = (formData.get("directory") as string) || "uploads";

        if (!file) {
            throw new Error("Missing or invalid file"); // this gets triggered!
        }

        return { file, directory };
    })
    .handler(async ({ data }) => {
        try {
            const { file, directory } = data;

            const uploadResponse = await client.uploads.index.post({
                file,
                directory,
            });

export const uploadFile = createServerFn({ method: "POST" })
    .validator((formData: FormData) => {
        if (!(formData instanceof FormData)) {
            throw new Error("Invalid form data");
        }

        const file = formData.get("file") as File;
        const directory = (formData.get("directory") as string) || "uploads";

        if (!file) {
            throw new Error("Missing or invalid file"); // this gets triggered!
        }

        return { file, directory };
    })
    .handler(async ({ data }) => {
        try {
            const { file, directory } = data;

            const uploadResponse = await client.uploads.index.post({
                file,
                directory,
            });

Any thoughts? I posted a screenshot of my browser logs showing that the file is there

3 Replies

ambitious-aqua•6mo ago

I'm hitting the same issue. Did you have any luck figuring this out?

continuing-cyanOP•6mo ago

i stopped using the server function for now

dependent-tan•6mo ago

can you please create a github issue for this?

Gaming

Programming

Passing formdata with file to server function but file disappears

Did you find this page helpful?