FormData append JSON

Question

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

Answer 1

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:

const data = JSON.stringify({
  description: 'description',
})
const fd = new FormData();
// append directly as part of the postData in plain text
fd.append('data', data);

console.log(...fd); // [key, value]