HTML FormData docs

[didier]

Describe the bug
When submitting a form using the POST method, no data is picked up by the request body in the endpoint. When sending the same data using something like Curl, Postman, Insomnia or any other HTTP tool, the JSON body is parsed correctly.

Logs
None

To Reproduce
I've created a repo: https://github.com/didier/kit-formdata.
Init options were no typescript, css for styling and no linting/formatting.

Expected behavior
I would expect an endpoint receiving a POST request from a form to handle the form data in the body object correctly, as per the docs.

Information about your SvelteKit Installation:

System:
  OS: macOS 11.2.3
  CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Memory: 532.94 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh

Binaries:
  Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node
  Yarn: 1.22.5 - /usr/local/bin/yarn
  npm: 6.14.4 - ~/.nvm/versions/node/v12.17.0/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman

Browsers:
  Brave Browser: 89.1.22.70
  Firefox: 83.0
  Firefox Developer Edition: 85.0
  Firefox Nightly: 74.0a1
  Safari: 14.0.3

npmPackages:
  @sveltejs/kit: next => 1.0.0-next.61 
  svelte: ^3.29.0 => 3.35.0

• Your browser
  Brave Browser: 89.1.22.70
• Your adapter (e.g. Node, static, Vercel, Begin, etc...)
  I'm using the node adapter, but since this issue happens in development too, I'm guessing this happens to other adapters as well.

Severity
High — I want to be able to progressively enhance my application, so submitting a form without JS should work too. And the docs say this is implemented.

[benmccann]

Is this still an issue? I see code that should handle it:

kit/packages/kit/src/runtime/server/parse_body/index.js

Line 20 in babe515

case 'application/x-www-form-urlencoded':

[didier]

@benmccann I'll update my repro repo to see if the issue still occurs. Will update.

[didier]

Updated https://github.com/didier/kit-formdata/blob/latest/src/routes/login.js.

So you can't grab the data directly from the request, but you can use the .get() functions.

export async function post({ body }) {
  console.log(body) // ReadOnlyFormData {}
  console.log(body.get('email')) // 'your@email.com'
}

I think as it stands right now, this may be more of a documentation issue than a functionality issue. FormData is only mentioned once in the docs, with no further explanation or reading on the methods. I'll try making a PR for some more expanded documentation if I find the time.

[rmunn]

Just ran into this myself. Here's what I initially tried in my src/routes/api/login.ts endpoint:

export async function post(req) {
    const username = req.body?.username
    const password = req.body?.password
    if (!username || !password) {
        return {
            status: 400,
            body: { error: 'syntax_error', description: 'POST body should include username and password fields' }
        }
    }
    // Login logic goes here
}

Changing it to req.body?.get('username') and req.body?.get('password') worked, but I wouldn't have figured that out until I thought to follow the link to FormData in the MDN docs. Apparently I was expecting the body to be parsed in a way similar to JSON, because that's how I wrote it without thinking twice.

Might be a good idea to expand the documention with an example of parsing a POST body.

[benmccann]

I sent a PR for this: #2095

I didn't add an example, but added a new sub-heading, so hopefully that will make it easier to notice