0

I am trying to send a json file to an api with an image file included. The following is the code:

let newUploaded = [...uploaded];
        for (var i = 0; i < e.target.files.length; i++) {
            newUploaded.push({
                url: URL.createObjectURL(e.target.files[i]),
                file: e.target.files[i],

            })
        }
setUploaded(newUploaded);

While seeing the request in the network tab, the following is displayed:

[{"url":"blob:http://localhost:3000/st8q1wgest","file":{}}]

As you can see, the file value is empty. Data is sent using form data.

I need to be able to include the file in the request so I can access it in an API.

Marcellin Khoury
  • 336
  • 5
  • 13
  • You can't send files in JSON that way. You have to read the file and include the file's contents in the JSON, either by converting to base64 or, if the file's contents are compatible, simple as is. – Heretic Monkey Mar 30 '23 at 21:55
  • Does this answer your question? [Posting a File and Associated Data to a RESTful WebService preferably as JSON](https://stackoverflow.com/questions/4083702/posting-a-file-and-associated-data-to-a-restful-webservice-preferably-as-json) – Heretic Monkey Mar 30 '23 at 21:57

0 Answers0