How create json file by object for send request in Angular

Question

I need to send a multipart request to server with a file (document_example.pdf) and a json file that contains the data object (data_object_example.json) in Angular 7.

data_object_example.json -> { "attribute1": "name", "attribute2": "second_name" }

I know how create a multipart request, but I don't know how create json file by a object.

Thanks. ;)

Answer: Thanks to HaiTH

const docJson = {
  fileDocType: file.name.split('?')[0].split('.').pop(),
  fileName: file.name
}
const fileJson = new File([JSON.stringify(docJson)], "file.json", {type: "application/json'"});

const formData = new FormData();
formData.append('json', fileJson);

Why not just JSON.stringify() the data object and pass it as another field in the multipart request? — HaiTH
– HaiTH, Commented Mar 22, 2021 at 15:29
Hi, because I need to pass a File type json to server... and i can't change the backend. — Miquel Angel Barragan Laso
– Miquel Angel Barragan Laso, Commented Mar 22, 2021 at 15:33

HaiTH · Accepted Answer · 2021-03-22 15:55:13Z

3

In the case you can't change backend and must create a file from client-side. You can try this way:

const data = {someKey: 'value'};
const blob = new Blob([JSON.stringify(data)], {type: 'text/plain'});
const tmpFile = new File([blob], 'data_object_example.json');

// now you can pass this tmp file to a form with your pdf
const form = new FormData();
form.append('file', tmpFile);

answered Mar 22, 2021 at 15:55

HaiTH

1,13111 silver badges11 bronze badges

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

2 Comments

Miquel Angel Barragan Laso Over a year ago

Hi, thanks this works! I've found another "easiest" way to do: const fileJson = new File([JSON.stringify(docJson)], "file.json", {type: "application/json'"});

HaiTH Over a year ago

Great that it could help.

Collectives™ on Stack Overflow

How create json file by object for send request in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related