Where are js blobs stored

Question

I'd like to understand at want point in time the content of a file blob is actually read into RAM.

I'll use the following scenario where a user simply selects a local image from his disk. The image is then displayed afterwards.

const [fileHandle] = await showOpenFilePicker();  // (1)
const file = await fileHandle.getFile();        // (2)
const imgUrl = URL.createObjectURL(file)        // (3)
document.getElementById("img").src = imgUrl;  // (4)

1. At what step (1-4) is the content of the file actually fully loaded into RAM?
2. How does this work before that? Does the blob only hold a reference to the file, but does not fully load it? How can this work with files on network drives?

The reason why I'm asking is my concrete usecase here. When doing above steps with a bigger amount of images from a slow network drive, I observed that after the above code finished running, the blob does not seem to be in RAM (the image takes a while to be displayed and it's not immediately visible in the 'sources' tab in chrome developer tools).

Would really like to understand what exactly is going on there - thank you all!

Answer 1

It's not a definitive answer, but I tested it and...

URL.createObjectURL(file) doesn't load up the image, at least not in chrome

Explanation:

1. Firstly, I created the URL using this code:

const [fileHandle] = await showOpenFilePicker();
const file = await fileHandle.getFile();
const imgUrl = URL.createObjectURL(file)

2. Ran the code and chose a file
3. Deleted the file from the hard drive
4. Loaded the image using:

document.getElementById("img").src = imgUrl;

5. The image didn't load, I got net::ERR_FILE_NOT_FOUND error

When I skipped the 3rd point the image loaded as expected

It seems like URL.createObjectURL(file) saves the path to the file on the hard drive. Or at least it looks like this