Automatically convert FormData to JSON

[hgl]

Is your feature request related to a problem? Please describe.
Since svelte advocates progressive enhancement, I think an utility to automatically convert FormData to JSON can be really helpful to write forms that works w/o JavaScript.

The demo currently does it manually, but once the form becomes complex, the conversion can be cumbersome. e.g.,:

<input name="items[0].name" value="Shoe">
<input name="items[0].price" value="99">
<input name="items[1].name" value="Pants">
<input name="items[1].price" value="99">

Describe the solution you'd like
Svelte kit provides an utility that automatically converts FormData to JSON. However, since FormData erases type like number, a mapping between FormData and types is needed. One solution I can think of is that svelte kit allows specifying an attribute like svelte:type="number" on form controls, and svelte kit would parse the types into a manifest keyed by form action, if it points to an endpoint, and the utility is only usable in the endpoint that uses the manifest to generate the corresponding JSON.

Describe alternatives you've considered

How important is this feature to you?
Not very, since it's manually convertible.

Additional context

[Rich-Harris]

The reason we use FormData is so that your endpoints work with regular HTML form submissions as well as data sent via fetch. Sending JSON blobs (constructed in a somewhat opinionated way, if we were to recognise things like items[1].price) would violate our principles, so I'm going to close this

[Rich-Harris]

oh wait, I think I misunderstood — you want a mechanism for converting the ReadOnlyFormData inside endpoints to JSON? That seems like something that ought to be done in userland, in the handle function

[hgl]

you want a mechanism for converting the ReadOnlyFormData inside endpoints to JSON?

Yes, passing FormData to endpoints which then convert it to JSON and call backbend APIs seems to be a common pattern.

P.S. is ReadOnlyFormData really necessary? #1215 (comment)

That seems like something that ought to be done in userland, in the handle function

FormData erases types like number, not sure if it's easily doable in an automatic way without some annotation support from svelte kit, e.g.:

<input name="items[1].price" value="99" sveltekit:type="number">

[Rich-Harris]

not sure if it's easily doable in an automatic way

It's not. Those annotations would have no meaning if the data came via a form submission rather than a fetch

[hgl]

I think there might be some misunderstanding. Sorry if I was unclear, let me try again:

Those annotations would have no meaning if the data came via a form submission

This feature request is meant to address exactly that. What I think svelte kit should do, given an annotated form, is to generate a manifest containing the mapping between field names and annotated types, and it also knows which manifest corresponds to which endpoint, something like:

endpoint: /cart
method: post
types:
  items[0].price: number

And when that endpoint receives

items[0].price=99

it should use the manifest to convert it to

{ items: [{ price: 99 }] }

(Maybe return 400 for any request body (and/or content-type) that doesn’t match the manifest, if the endpoint is specified to auto-convert.)

Ideally it can also auto convert multipart, with binary data being converted to base64 strings.

[Rich-Harris]

In newer versions, we expose a Request object, and form data is generated with await request.formData(). Anything beyond that belongs in userland, so I'll close this

[HasanAboShally]

Are you looking for something like this?

https://dev.to/danawoodman/getting-form-body-data-in-your-sveltekit-endpoints-4a85