How to convert HTML5 FormData object to raw payload with frontend javascript?

Question

In my browser side script, I want to get the entire POST request payload stream.

But when the body is a FormData object, especially when it contains a file blob, is there any easy way to make it?

The reason for doing this is that I want to make AES encrypt on the whole request body, using axios request interceptor.

For example:

I want to convert the FormData object:

const fd = new FormData()
fd.append('example.png', file) // here file is a file object from the file input object

Into the below content:

------WebKitFormBoundaryMV9GYQ2pcwRJ6XAA
Content-Disposition: form-data; name="image"; filename="example.png"
Content-Type: image/png
<<blob bytes>>

------WebKitFormBoundaryMV9GYQ2pcwRJ6XAA--

Is there any easy way to make it or any exists npm packages?

Does this answer your question? Javascript formdata: encrypt files before appending — Justinas
– Justinas, Commented Feb 24, 2021 at 8:16
Thank you, but I think it may be a bit inconvinient if I implement the whole procedure myself. I'd rather expecting a exists library to make it. — Alfred Huang
– Alfred Huang, Commented Feb 24, 2021 at 8:23

Kaiido · Accepted Answer · 2021-02-24 08:24:06Z

4

I am not sure if it will really help your end goal, but for what you ask, you can create a new Response object from this FormData and consume it as plain text:

(async () => {
  const file = await new Promise((res) => document.createElement('canvas').toBlob(res));
  const fd = new FormData();
  fd.append('example.png', file, 'example.png');
  const resp = new Response(fd);
  console.log( await resp.text() );
})();

answered Feb 24, 2021 at 8:24

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert HTML5 FormData object to raw payload with frontend javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related