Create built-in support for formData

[kentcdodds]

This has been discussed (though that's marked as answered). Here's my own implementation of a utility that pre-processes a FormData object based on a given schema so it can be converted into a regular object via .parse:

import { z } from 'zod'

type FormDataValue = FormDataEntryValue | FormDataEntryValue[] | null

export function preprocessFormData<Schema extends z.ZodTypeAny>(
	formData: FormData,
	schema: Schema,
) {
	const shape = getShape(schema)
	return mapObj(shape, ([name, propertySchema]) =>
		transformFormDataValue(
			getFormValue(formData, String(name), propertySchema),
			propertySchema,
		),
	)
}

function getShape<Schema extends z.ZodTypeAny>(schema: Schema) {
	// find actual shape definition
	let shape = schema
	while (shape instanceof z.ZodObject || shape instanceof z.ZodEffects) {
		shape =
			shape instanceof z.ZodObject
				? shape.shape
				: shape instanceof z.ZodEffects
				? shape._def.schema
				: null
		if (shape === null) {
			throw new Error(`Could not find shape`)
		}
	}
	return shape
}

function getFormValue(
	formData: FormData,
	name: string,
	schema: z.ZodTypeAny,
): FormDataValue {
	if (schema instanceof z.ZodEffects) {
		return getFormValue(formData, name, schema.innerType())
	} else if (schema instanceof z.ZodOptional) {
		return getFormValue(formData, name, schema.unwrap())
	} else if (schema instanceof z.ZodDefault) {
		return getFormValue(formData, name, schema.removeDefault())
	} else if (schema instanceof z.ZodArray) {
		return formData.getAll(name)
	} else {
		return formData.get(name)
	}
}

function transformFormDataValue(
	value: FormDataValue,
	propertySchema: z.ZodTypeAny,
): unknown {
	if (propertySchema instanceof z.ZodEffects) {
		return transformFormDataValue(value, propertySchema.innerType())
	} else if (propertySchema instanceof z.ZodOptional) {
		return transformFormDataValue(value, propertySchema.unwrap())
	} else if (propertySchema instanceof z.ZodDefault) {
		return transformFormDataValue(value, propertySchema.removeDefault())
	} else if (propertySchema instanceof z.ZodArray) {
		if (!value || !Array.isArray(value)) {
			throw new Error('Expected array')
		}
		return value.map(v => transformFormDataValue(v, propertySchema.element))
	} else if (propertySchema instanceof z.ZodObject) {
		throw new Error('Support object types')
	} else if (propertySchema instanceof z.ZodBoolean) {
		return Boolean(value)
	} else if (propertySchema instanceof z.ZodNumber) {
		return Number(value)
	} else {
		return value
	}
}

function mapObj<Key extends string, Value, MappedValue>(
	obj: Record<Key, Value>,
	cb: (entry: [Key, Value]) => MappedValue,
): Record<Key, MappedValue> {
	return Object.entries(obj).reduce((acc, entry) => {
		acc[entry[0] as Key] = cb(entry as [Key, Value])
		return acc
	}, {} as Record<Key, MappedValue>)
}

Here's how I'm using that in a Remix action:

const ShipFormSchema = z.object({
	name: z.string().min(2).max(60),
	description: z.string().min(20).max(10_000),
	capacity: z.number().min(1).max(100),
	dailyCharge: z.number().min(1).max(100_000),
	modelId: z.string().cuid({ message: 'Invalid Model' }),
	starportId: z.string().cuid({ message: 'Invalid Starport' }),
	imageFile: z.instanceof(File),
})

// ... in the action
	const formData = await unstable_parseMultipartFormData(
		request,
		unstable_createMemoryUploadHandler({ maxPartSize: MAX_SIZE }),
	)
	const result = ShipFormSchema.safeParse(
		preprocessFormData(formData, ShipFormSchema),
	)

This works well for me, but I feel like it would be better to be built-in and would like to discuss doing something like that.

We talked about this a bit on twitter as well: https://twitter.com/colinhacks/status/1611474885188161536

[danawoodman]

Gonna leave Kent hanging on this one? smh

The zod-form-data lib works but native integration would be great

[kentcdodds]

I'm using conform's zod integration now and it's great.

I know the zod folks are busy and have no expectation they will solve my problems for me :)

[danawoodman]

Gotta check it out, thanks Kent-dog

[gleasonw]

Oh what a great lib, thanks for the suggestion. Using it to validate form data on a NextJS route.

[itshoro]

For now a workaround without using a third-party-library is to objectify the form data.

validator.parse(Object.fromEntries(formData.entries()));

I didn't notice an obvious downside to this.

EDIT: The one time I post something... Well there is a downside. formData.entries() only returns string and Blob types, notably arrays are absent. If you expect multiple values for the same key you have a little bit of extra work cut out for you.

Additionally there isn't really a great way to automatically deal with arrays. While you certainly can just do formData.getAll(key) and check for the length, it doesn't really differentiate between "a single value" and "an array with a single value". You could automatically do it based on some suffix in the key, I believe adding [] to the end of it was done in the past. But this seems to be a weakness inherit to FormData.

I still believe this can be a good approach.

[NidalGhonaim]

perfect for my use case, thanks!

[sveltecult]

Hello, I built a custom form data validation library that does exactly this. Indeed, my problem was the .get() and .getAll() so I went with the same approach. If the input field ends with [] then it's an array. Otherwise, it's just a string. Also, validating each data or looping through array via .* is possible. Check it out at https://github.com/sveltecult/red

[lu-zen]

I'm using zod-form-data, it's awesome and supports arrays

[laginha]

You could do something like this to account for multiples without the need to add [] to the end of the input name:

const entries = [...formData.entries()] // iterable to array
const fromEntries = entries.reduce((accu: any, [key, value]) => {
  if (key in accu) {
    // account for multiples
    accu[key] = [key].concat(accu[key])
  } else {
    accu[key] = value
  }
  return accu
}, {})

const { success, error, data } = schema.safeParse(fromEntries)

[Radiergummi]

@laginha small improvement suggestion; your version reverses the order of the values, which may be problematic. This one solves that:

export function extractFormData(formData: FormData) {
    return [
        ...formData.entries(),
    ].reduce<Record<string, FormDataEntryValue | FormDataEntryValue[]>>(
        (data, [key, value]) => ({
            ...data,
            [key]: key in data
                ? Array.isArray(data[key])
                    ? [...data[key], value]
                    : [data[key], value]
                : value,
        }),
        {},
    );
}