Understanding Object URLS for client-side files and how to free the memory

Question

I am using createObjectURL to get a reference URL to a local image file. When I am done with the file/image, I call revokeObjectURL to free that memory. Everything works fine for me but I just want to be sure that I am releasing all the memory I can.

My concern arose after I inspected the chrome://blob-internals page. Upon calling createObjectURL and using the image, I noticed two entries were created. One with url blob:blobinternal:///d17c4eef-28e7-42bd-bafa-78d5cb86e761

and the other

blob:http://localhost/dbfe7b09-81b1-48a4-87cd-d579b96adaf8

Both referred to the same local file path though. Upon calling revokeObjectURL only the second entry was removed from chrome://blob-internals. Why does this occur, how do I get rid of the other entry and what is the difference between the two types?

Also, I have seen examples of people revoking the URL before even using the image. What effect does this have?

Some insight into the topic would be much appreciated! :)

EDIT: I've created an example at jsfiddle. So first open blobinternals and remove any existing blobs. Then run the jsfiddle example, and choose an image file on your machine. Then refresh blobinternals to see what it added. Then click "revoke URL" in my example. Finally refresh blobinternals to see what blobs remain.

Answer 1

The other reference (the one beginning with blob:blobinternal) seems to be held by the input type="file" element. I modified your function to reset the value of the input, and when I click the revoke URL button, all the references are cleared:

killBut.onclick = function () {
    URL.revokeObjectURL(ourURL);
    fileBut.value = '';
};

Tested in Chrome Canary.