1

I am using Deno, with the Oak framework. I want to send a FormData object as a response from the server, because I want to send (in only one response, instead of making many calls) an object which contains many blobs (for example, a group of images), so it can be read in the client, the web browser.

My backend code is:

  // Create a new instance of FormData
  const formData = new FormData();

  // Add some key-value pairs to the FormData object
  formData.append("key1", "value1");
  formData.append("key2", "value2");

  // Send the FormData object as the response to the client
  context.response.body = formData;

In the client, to receive it (and previously making the call), I have this code, but here I encounter the problem:

await fetch(`/myroute/get`, { 
    method: 'POST',
    body: myFormData, // this is another FormData, that I sent from the client and read in the server with no problems.
  })
  .then(fetch => fetch.formData()) // Error!
  .then(res => { console.log(res); });

The problem is, that if I try to read the response with fetch.formData(), I get:

Uncaught (in promise) TypeError: Could not parse content as FormData.

I have tried with Firefox and Chrome, and the error (to my understanding) seems to be that the "boundary" of the FormData is not properly setted.

So my question is, does anybody how to solve this problem, or has any functional code to do that task? (that is, to send many blobs from Oak, in only one response and receive it correctly). I don't know If that can be accomplished using something different than FormData, in which case I am also interested. Many thanks in advance.

Imagitori
  • 55
  • 5

1 Answers1

1

Ref: What is the boundary in multipart/form-data? - Stack Overflow

This is a known issue in Oak. It's being tracked in these GitHub issues:

See also this topically-related issue and comment:

jsejcksn
  • 27,667
  • 4
  • 38
  • 62
  • 1
    In the meantime, you could just define your own binary format and encode/decode at both ends. – jsejcksn Dec 22 '22 at 02:00
  • Many thanks for your response, @jsejcksn. I opened/followed those two issues in Github, and tried every hint that I find in stackoverflow about the issue, but with no luck. My (little) understanding is that the boundary parameter that oak sents in the response is lacking something. I have tried using `context.response.headers.set` in oak in different ways before sending the body response, but the result is the same. Maybe somebody has finded the correct "boundary" that must be sent, o any workaround, because I don't feel capable to create a new format, but it may end up being the best option. – Imagitori Dec 22 '22 at 18:17
  • This is a solution based on base64 strings: https://github.com/oakserver/oak/issues/565#issuecomment-1450673994 – Imagitori Mar 03 '23 at 08:46
  • [^](https://stackoverflow.com/questions/74866912/deno-oak-how-to-send-an-object-with-many-blobs-in-only-one-response-to-the-web/74883285?noredirect=1#comment133418919_74883285) @Imagitori Re: [alternate binary format](https://stackoverflow.com/questions/74866912/deno-oak-how-to-send-an-object-with-many-blobs-in-only-one-response-to-the-web/74883285?noredirect=1#comment132151584_74883285): I'm interested in helping you with this, but Stack Overflow is a terrible venue for discussion. Do you have a [Discord](https://discord.com/) account (or [Matrix](https://matrix.org/))? – jsejcksn Mar 04 '23 at 22:32