Passing formdata with file to server function but file disappears

// 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 });

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,
            });