Parsing FormData from server's response doesn't work

[kostelis]

I am making a POST request to a server that responds with multiple files in multipart/form-data response.
The documentation states that:

fetch comes with methods to parse multipart/form-data payloads as well as x-www-form-urlencoded bodies using .formData() this comes from the idea that Service Worker can intercept such messages before it's sent to the server to alter them. This is useful for anybody building a server so you can use it to parse & consume payloads.

However, the response.formData() throws an error saying response.formData is not a function. Am I doing something wrong, or is this no longer supported? Here is my code:

    const responsePromise = fetch(`${config.serverUrl}/create`, {
      method: 'POST'
    });
    return responsePromise
      .then((response) => {
         return response.formData().then(formData => {
            console.log(formData)
        })
      });

I am using node-fetch@2 (v2.6.7) since I cannot use imports in my environment.

[jimmywarting]

The formdata method wasn't implemented in v2.x
It only exist in v3

Are there any reasons for why you can't use async import? It works from commonjs as well

[kostelis]

Hi Jimmy, thanks for bringing me back on road! I managed to import node-fetch v3 using on commonjs project and make a wrapper for it like so:

exports.fetch = async function (url, init) {
    const {default: fetch} = await import("node-fetch");
    return await fetch(url, init);
};

However, when I try to make a POST request, the fetch() function still performs a GET request. So for example if I execute this piece of code I receive a 200 status code, even though a 405 Method not allowed would be expected:

await fetch('https://www.google.com', {
        method: 'POST',
        body: JSON.stringify({"value":"test"}),
        headers: { 'Content-Type': 'application/json' }
      });

I double-checked it a gazillion times but I can't see what I am missing. It looks like the init parameter is ignored. Is the const {default: fetch} part importing something wrong?

[kostelis]

You're right, there must be something wrong with my environment. I am trying to use node-fetch on Zapier CLI. I will try to figure it out, sorry to bother you.

[kostelis]

Also, just a quick one. How would you parse the FormData response returned from a server using node-fetch? Would it be accessible via response.formData().then(formData => { ... })?

Here is a full example of how I would expect to do it:

fetch('https://httpbin.org/post', {
  method: 'POST',
  body: JSON.stringify({ value: 'test' }),
  headers: { 'Content-Type': 'application/json' },
}).then((res) => {
  res.formData().then(formData => {
    console.log(formData)
  })
})

Is that correct?

[jimmywarting]

yes, that's correct

there is a simple demo here: https://stackblitz.com/edit/node-bxkftw?file=index.js

the response from https://httpbin.org/post isn't a multipart/form-data response, it return JSON. so your particular example would work. but yea, you would be able to serialize the response/request back into a FormData using .formdata().then(fd => ...)

the use case could be that your website sends a <form> so you would be able to parse it using:

function handler(req, res) {
  new Response(req, { headers: req.headers }).formData().then(fd => { ... })
}

[kostelis]

Awesome, thanks!

In my case the server is returning multiple files, that's why it serializes responses as multipart/form-data.

Another option would be multipart/mixed. I wonder if node-fetch supports parsing multipart/mixed response as well?

[jimmywarting]

haven't tried multipart/mixed if it works. maybe it will. as long as it has a boundary it might work.

I have also used the server to respond back with a formdata back to the web client instead of having to zip all entries.
I think it's good for sending simple files. but it's certainly not the best format but it works.