Zod schema return object instead of FormData

[andrew-shpak]

Describe the bug and the expected behavior

When schema contains file and bool usually server expect to see formData instead of object.
Currently we can use only objects itself

Conform version

v1.13.2

Steps to Reproduce the Bug or Issue

1. Create form with file and bool
2. try to convert it back to formData by conform primitives

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[andrew-shpak]

this is my implementation

/**
 * Converts a plain object to FormData, preserving File objects and handling nested structures.
 *
 * Useful for API calls that require multipart/form-data (e.g., file uploads).
 * Works with validated Zod output from @conform-to forms.
 *
 * @param obj - The object to convert to FormData
 * @param formData - Optional FormData instance to append to (used internally for recursion)
 * @param parentKey - Internal parameter for nested object keys
 * @returns FormData instance with all values properly encoded
 *
 * @example
 * ```typescript
 * const data = {
 *   name: "Certificate",
 *   file: new File(["content"], "cert.pdf"),
 *   semesters: [{ value: 1 }, { value: 2 }],
 * };
 * const formData = objectToFormData(data);
 * await authorizedPostFormData(request, "/api/certificates", formData);
 * ```
 */
export function objectToFormData(
  obj: Record<string, unknown>,
  formData: FormData = new FormData(),
  parentKey = ""
): FormData {
  for (const [key, value] of Object.entries(obj)) {
    const formKey = parentKey ? `${parentKey}.${key}` : key;

    if (value === null || value === undefined) {
      continue;
    }

    if (value instanceof File) {
      formData.append(formKey, value);
    } else if (value instanceof Date) {
      formData.append(formKey, value.toISOString());
    } else if (Array.isArray(value)) {
      value.forEach((item, index) => {
        const arrayKey = `${formKey}[${index}]`;
        if (item !== null && item !== undefined) {
          if (typeof item === "object" && !(item instanceof File)) {
            objectToFormData(item as Record<string, unknown>, formData, arrayKey);
          } else if (item instanceof File) {
            formData.append(arrayKey, item);
          } else {
            formData.append(arrayKey, String(item));
          }
        }
      });
    } else if (typeof value === "object") {
      objectToFormData(value as Record<string, unknown>, formData, formKey);
    } else {
      formData.append(formKey, String(value));
    }
  }

  return formData;
}

[edmundhung]

Can you share a bit more your usecase? You should have a formData object naturally from your form. Is there any reason you need to serialize a data object manually?

[andrew-shpak]

Can you share a bit more your usecase? You should have a formData object naturally from your form. Is there any reason you need to serialize a data object manually?

Well, formData should contains file and bool, because by default bool value in server on so we need convert it back to bool by zod.
Server usually accept formData for fields but zod return object so I need convert to formData back.

The main reason is conform or zod does not provide methods to work with formData and servers accept to see formData

[edmundhung]

If I understand correctly, you are parsing the formData in the client, then trying to serialize it back to formData before sending it to the server. I wonder why you can't just send the raw formData to server and parse it directly there?

It would be really helpful if you can share more how you will be using it.

[andrew-shpak]

If I understand correctly, you are parsing the formData in the client, then trying to serialize it back to formData before sending it to the server. I wonder why you can't just send the raw formData to server and parse it directly there?

It would be really helpful if you can share more how you will be using it.

const certificateSchema = coerceFormValue(
  z
    .object({
      url: z.string().default("").optional(),
      certificateTypeId: z.string({ error: uk.requiredField }),
      title: z.string({ error: uk.requiredField }),
      organization: z.string({ error: uk.requiredField }),
      number: z.string().optional(),
      start: z.string({ error: uk.requiredField }).refine(validateDate, uk.invalidDate),
      end: z.string().refine(validateDate, uk.invalidDate).optional(),
      hours: z.number({ error: uk.requiredField }),
      credits: z.number({ error: uk.requiredField }),
      includeInCv: z.boolean().optional(),
      comment: z.string().optional(),
      fileName: z.string().optional(),
      file: z.union([
        z.string({ error: uk.requiredField }),
        z.file({ error: uk.requiredField }),
        z.array(z.file().optional()).optional(),
      ]),
      contentType: z.string().optional(),
    })
    .refine((entity) => validateDateRange(entity.start, entity.end), {
      message: uk.invalidDateRange,
      path: ["end"],
    })
);

export async function loader({ request, params }: Route.LoaderArgs) {
  return await getCertificateData(request, params.userEmail);
}

export default function CreateCertificate({ loaderData, params }: Route.ComponentProps) {
  const { userEmail } = params;
  const redirectUrl = `/${userEmail}/profile`;
  const breadcrumbs = [
    <Link to={`/${userEmail}/profile`}>
      <span>{loaderData.userFullName}</span>
    </Link>,
    <span>{pageTitle}</span>,
  ];
  return (
    <Layout title={pageTitle} breadcrumbs={breadcrumbs}>
      <CertificateForm
        action={`${redirectUrl}${routes.certificates}/new`}
        redirectUrl={redirectUrl}
        certificatesTypes={loaderData.certificatesTypes}
      />
    </Layout>
  );
}

export async function action({ request, params }: Route.ActionArgs) {
  const formData = await request.formData();
  const submission = parseSubmission(formData);
  const result = certificateSchema.safeParse(submission.payload);

  if (!result.success) {
    return submissionFailure(result, submission);
  }

  const validatedFormData = objectToFormData(result.data);
  const response = await createCertificate(request, validatedFormData);

  if (response.status === 400) {
    const { errors } = await response.json();
    return data(errors);
  }

  if (response.ok) {
    return redirectWithSuccess(
      `/${params.userEmail}/profile`,
      "Інформацію про сертифікат успішно додано!"
    );
  }
  return await response.json();
}

[edmundhung]

Thanks for sharing an example. How is the result of objectToFormData different from the original form data? Can you just reuse it when creating the certificate?

I think the challenge here is that we can't assume all endpoints expects the same naming convention as Conform does (e.g. parent.child or items[index]). If we provide a helper like this, we will need to provide plenty of customization to fit different requirements.

[andrew-shpak]

The main difference is includeInCv field which initially was on (this is how browser see it on server/action function) but after conversation to true/false and this is why we need to have objectToFormData.

In case if I will use FormData as is I will need to do conversion from on -> true on server side

[edmundhung]

Isn't this quite similar to your another suggestion here except that works with a URLSearchParams instead of a FormData?

The logic should be fairly similar too (just added File support). Maybe you can support both in the implementation?

Feel free to submit a PR :)