The way to determine the file is loaded in the iframe

Question

I have a problem: I would like to catch the moment when the Save file dialog is closed or the csv file generated on the server is uploaded (to hide the counter for downloading). I know that there is no such event in Javascript. I definitely don't want to add cookies for such a minor issue to the backend, so I would like to implement another workaround. The only way I can see is an iframe, but as far as I can see, event listeners like onload don't work with the attachment header in Chrome at least. I also tried to implement a timer check for iframe status, but it worked right after sending the request to send the file. The file is created on the server in a few seconds (10-20), so this solution does not meet my goals.

I use Angular on the interface, so any solution compatible with the solution (vanilla JS, jQuery, Angular) will be a big help for me. Hope to receive. Thanks guys!

Answer 1

There is no DOM event known here that fires when the Save file UI dialog box opens or closes.

You can try using the focus event to catch when the Save file dialog is closed and window restores focus after calling .click() on the <a> element that has the download attribute, although this approach is not completely reliable.

 // append or display spinner element here var csvUrl = document.createElement("a"); csvUrl.href = url; csvUrl.download = "csv_filename"; csvUrl.click(); window.onfocus = function () { document.body.removeChild(csvUrl); // remove or hide spinner element here window.onfocus = null; }