Response Body with FormData

[M3cubo]

Is it possible to send a FormData as a context.response.body from the server (Deno/Oak) to the client (web browser)?

In Firefox I receive the error: TypeError: Could not parse content as FormData and in Chrome it says: TypeError: Invalid MIME type when I try to receive the response using response.formData().

I can send a FormData from the client to the server with no problem, but I don't know if the other way around is possible.

Basically, what I want to do is send from the server an object-like which contains many blobs (images) in an all-in-one response.

[jcs224]

Seems to me like you should serialize the FormData into a JSON string, return it to the client, then deserialize it in the client as an Object.

This is what a quick google revealed, could be helpful. https://gomakethings.com/serializing-form-data-with-the-vanilla-js-formdata-object/

[M3cubo]

Hi @jcs224, thanks for your reply (and sorry for my late reply). Here is what I have tried:

This is the code in the oak server:

  // 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, I have this code:

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())
  .then(res => { console.log(res); }); 

If I try to read the response with fetch.formData(), I get:

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

If I try to read the response with fetch.json() as you suggest (and serializing in the server previously with context.response.body = JSON.stringify(formData); ) I get an empty object:

Object { }

I could also try to add this line before the oak response:

context.response.headers.set("Content-Type", "multipart/form-data");
context.response.body = JSON.stringify(formData);

But the result is the same. This is related to this possible bug (#400), which I I don't know if it has been solved or if there is any workaround or example code to accomplish the same need (to receive in the client an object from Deno Oak that contains many blobs+strings).

Also, I am using the last version of Oak (11.1.0).

[M3cubo]

Using Insomnia, I receive the FormData that was created in the server. This is the code in the server:

Router.post("http://localhost:7777/test", async (context) => {

 const formData = new FormData();
 formData.append("key1", "value1");
 formData.append("key2", "value2");

 context.response.body = formData;

});

And this is the result that Insomnia received:

But If I use in the server context.response.body = JSON.stringify(formData); I receive an empty object. In fact, this code produces:

  let stringified = JSON.stringify(formData);
  let parsed = JSON.parse(stringified)
  console.info(parsed) // returns '{}' ??

So sending the response body without stringfy seems the best option, at least for now.

But the problem is that I can't receive that FormData in the browser, as I don't know how I can "parse" that response, because using res.formData() fails.

[linhub15]

Oak can send FormData to the client, just like your example above. Do not stringify it and you're good to go.

// server
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((ctx) => {
  const form = new FormData();
  form.append("key1", "hello");
  form.append("key2", "world");
  ctx.response.body = form; // automatically adds the `content-type` response header
});

await app.listen({ port: 8000 });

When fetching the results, we can turn it back into a FormData object. response.formData()

// client
const response = await fetch("http://localhost:8000");
const form = await response.formData();

It does seem like oak header didn't include the boundary and gives this error.

Uncaught TypeError: multipart/form-data must provide a boundary
    at new MultipartParser (deno:ext/fetch/21_formdata.js:367:15)
    at parseFormData (deno:ext/fetch/21_formdata.js:499:20)
    at packageData (deno:ext/fetch/22_body.js:345:20)
    at consumeBody (deno:ext/fetch/22_body.js:238:14)
    at async <anonymous>:2:1

Looks like the response header is missing a boundary field.

Response {
  ...
  headers: Headers {
-   "content-type": "multipart/form-data"
+   "content-type": "multipart/form-data"; boundary=---------------------------293582696224464 // should have this
  }
  ...
},

[M3cubo]

Hello @linhub15, many thanks for helping.

The problem is that no matter which way I send the FormData from oak, the client doesn't receive it correctly. This line fails on the client browser:

const form = await response.formData(); // returns TypeError: Could not parse content as FormData

probably because of the missing "boundary", but I have tried to work around this in several ways. I have also tried using an npm package which can add the formData boundary:

import formdata from "npm:form-data";
const formData = new formdata();
formData.append("key1", "value1");
context.response.headers.set('Content-Type', `multipart/form-data; boundary=${formData.getBoundary()}`)
context.response.body = formData; // still fails in the client

The thing is, that using only "basic" Deno I can read correctly the FormData in the client browser, with a code like this:

const server = Deno.listen({ port: 7000 });

for await (const conn of server) serveHttp(conn);

async function serveHttp(conn) {
  const httpConn = Deno.serveHttp(conn);
  for await (const requestEvent of httpConn) {
    const data = new FormData();
    data.append("string1", "Hi");
    data.append("string2", "Bye");
    data.append("blob1", new Blob(['<a id="a">Hi</a>'], { type: "text/xml" }));
    data.append("blob2", new Blob(['<b id="b">Bye</b>'], { type: "text/xml" }));
    requestEvent.respondWith(new Response(data));
  }
}

(Log of the FormData when using a pure Deno example instead of Oak)

So from what I understand this is an error in Oak, since if it worked in the same way that "standard" Deno does, the error would be fixed.

I don't know if there is any solution to this, like using basic Deno to send FormData, in a parallel port. But from what I understand, I would need to have two active http ports etc, so it would be more of a mess.

I also don't know if this problem is solved by other users in some other way, or if they simply don't need to send FormData responses from the server.

In any case, I'm curious if you've managed to receive the FormData from Oak in a working example, using a browser as client (I managed to receive it using Curl or Insomnia, but not the browser).

[M3cubo]

I ended up using a solution based on Base64 string. It is very inefficient (as base64 encoding increments +33% the size of the file encoded) but it works.

In the server:

 let URI_File = `/my/uri/file.mp4`;
 const file = await Deno.open(URI_File);
 const base64String = this.Lab.Library.base64Encode(await Deno.readAll(file));

const myObjectWithBlobs = {
myString: "hello",
myBlob: base64String
}

context.response.body = myObjectWithBlobs;

In the client, decoding the base64 string:

await fetch(`https://site.com/get`, { method: 'POST' })
  .then(response => response.json())
  .then(data => {

      const decodedBase64 = atob(data.myBlob);
      const arrayBuffer = new ArrayBuffer(decodedBase64.length);
      const uint8Array = new Uint8Array(arrayBuffer);  
      for (let i = 0; i < decodedBase64.length; i++) {
        uint8Array[i] = decodedBase64.charCodeAt(i); 
      }
  
      // We get the blob (but many blobs could be send in the same response)
      const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
    
  });

Hope that better solutions come in the future. If I encounter a better solution to this issue I will post it.

[th0rgall]

I might have some additional insight for people still bumping into this. You might need to include a filename for binary data fields in multipart/form-data for browsers to parse them properly.

I was experiencing a similar issue with SvelteKit. Just like the OP, I wanted to send a multipart/form-data response from the server to the client.

I also wanted to use fetch(...).then(r => r.formData()) on the client and the node form-data library on the server.

I also kept getting fetch/parsing issues on the client like TypeError: Invalid MIME type and TypeError: Failed to fetch (not TypeError: Could not parse content as FormData though).

The first one was explained by the missing boundary (thanks!), but the latter only happened when I tried sending a buffer, rather than a string. In that case, it turns out browsers (well, Chromium at least) requires a filename header for files/buffers.

This worked for me:

export const GET: RequestHandler = async () => {
  const form = new FormData();
  const buffer = await getData();
  form.append('key1', buffer, {
      filename: 'myfilename',
      knownLength: buffer.length,
      contentType: 'application/octet-stream'
    });
  return new Response(form.getBuffer(), {
    headers: form.getHeaders()
  });
}

So maybe it was a missing filename?

I'm including the knownLength and contentType options for good measure, but it also worked without them. I'm not sure if this would work well with Oak's built-in FormData support, or if there is still another issue at play here.