FormData append JSON

How can I create the following result using FormData

------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="data";
Content-Type: application/json

{
  "description": "description"
}
------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg


FILE_DATA
------WebKitFormBoundaryOmz20xyMCkE27rN7

I am using

const formData = new FormData();
const data = new Blob([JSON.stringify({
        description: 'description',
      })], {
        type: 'application/json'
      });
formData.set('data', data);
formData.set('file', file);

it generate

------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="data"; filename="blob"
Content-Type: application/json

{
  "description": "description"
}
------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg


FILE_DATA
------WebKitFormBoundaryOmz20xyMCkE27rN7

As you can see we have a filename="blob" in JSON part , I want to remove it

I want to have a data field in my multipart data not a data file

When you do

new Blob([JSON.stringify({
  description: 'description',
})], {
  type: 'application/json'
})

What you are really generating is a file, an UTF-8 text file, whose content will be {description:"description"} encoded in UTF-8.

So when you append it to your FormData, it is passed as a file, with the one particularity that you did set its Content-Type to application/json.

If you wish to send this data as part of the form-data's data in plain-text, that your server will be able to parse from the post-data directly, then just append your string as a key of your FormData:

(async () => {
const JSONData = JSON.stringify({
  description: "description",
});
const JPEGData = await new OffscreenCanvas(10, 10).convertToBlob({ type: "image/jpeg" });
const fd = new FormData();
// append directly as part of the postData in plain text
fd.append("data", JSONData);
fd.append("file", JPEGData, "image.jpg");

const resp = new Response(fd);
resp.text().then(console.log); // log the payload

})().catch(console.error);

However notice how doing so we lost the Content-Type header for the JSON part.
While RFC7578 does allow Content-Type headers for every kind of entry, HTML clearly states that non-file entries must not have one, and that file entries will have a name field set (which defaults to "blob").