How can I revoke an object URL only after it's downloaded?

Question

I'm saving a file in JavaScript using the following code:

var a = document.createElement('a');
a.href = URL.createObjectURL(new Blob(['SOME DATA']));
a.download = 'some.dat';
a.click();

I want to revoke the URL (using URL.revokeObjectURL) once the file is downloaded. When is it safe to do so?

Can I revoke it immediately after calling a.click() (which seems to work, but I'm not sure it's safe)? In a's click event listener? Is there a way to make a click event listener run after the default action?

Answer 1

After some experimenting, it seems both Chrome and Safari are able to download a file of 2GB just fine when revoking right after clicking an element. And Firefox was able to download a file of 600MB before the browser started grinding to a halt.

This is what I used to download large files:

const a = document.createElement('a');
const buffer = new ArrayBuffer(2_000_000_000);
const view = new Uint8Array(buffer);
for(let i=0; i<view.length; i++) {
    view[i] = 255;
}
a.href = URL.createObjectURL(new Blob([buffer]));
a.download = 'some.dat';
a.click();
URL.revokeObjectURL(a.href);

The spec doesn't specifically mention aborting existing streams when revoking a url, so in theory doing it like this would be just fine.

However, to be safe I would either revoke the url after a few seconds using setTimeout(), or if the download is initiated from a specific screen, you can add logic to revoke it once the user navigates away from that screen.

Browsers also automatically revoke object urls once the last page of your domain is closed, so depending on your situation, not revoking urls at all might also be a viable solution.

Answer 2

a.click() on a DOM element simulates a click on the element, instead of propagation of the click event, so it's directly sent to the browser. I believe it would be a little bit safer to move revoking of URL object to another event cycle using a timer:

setTimeout(function() {
 URL.revokeObjectURL(a.href);
}, 0);