TL;DR: On my website, I have a file name of a static file, and I need a Blob or byte array.

I assume it's been asked before as it's pretty basic, but I've spent 2 hours on this already and all the questions involve an <input> element / events / DOM elements, and I just want to read files I have already as the site is built.

I'm trying to quickly make a local website with a few images and a button, that should fire an API call when pressed, with the images attached to it.

The site is built using the most basic express app I could find. I simply ran npx express-generator --no-view to get the simplest HTML template. For all intent's and purposes, everything happens in one file - index.html.

I want the files converted to byte streams, blobs, or anything that I could work with. Now, I have images inside public folder of the app. Assuming I know the filenames and can access them in index.html / <script>, how can I go from a filename to a Blob, byte string or anything like that?

Illustration in code:

img1_fname = "/images/img1.png"
img2_fname = "/images/img2.png"
...
imgN_fname = "/images/imgN.png"

// Question
img1_bytes = ???
img2_bytes = ???
...
imgN_bytes = ???

var formData = new FormData();
formData.append(img1_fname, img1_bytes);
formData.append(img2_fname, img2_bytes);
...
formData.append(imgN_fname, imgN_bytes);

var request = new XMLHttpRequest();
request.open("POST", URL);
request.send(formData);