How to check if file downloads finished in Chrome?

Question

When user clicks download button/link the loading screen appears on the page. I use onblur event on this button to hide my loading screen after download process is finished. It works fine in any browser, but not Google Chrome.

Is there any event listener or other simple way which I can use for Chrome?

Link:

<a href="/resources/foo" class="show-ls" onblur="hideLS()">Download</a>

show-ls function just shows loading screen:

$('.show-ls').click(function () {
  $('#loading-screen').show();
});

loading screen is div element in body:

<div id="loading-screen" class="loading-screen" style=""></div>

.loading-screen {
  background: rgba(255, 255, 255, 0.6) url('/images/loadingscreen.gif') no-repeat fixed center center;
  width: 100%;
  height: 100%;
  position: fixed;
}

hideLS function just hides the loading screen:

hideLS= function () {
  var loadingScreen = $('div.loading-screen');
  if (loadingScreen.length > 0)
    loadingScreen.hide();
};

Downloading process is ok, loading screen is fine too. The problem is only with hiding loading screen after downloading file is finished in Chrome.

How should we now anything about your code without ... code? — yunzen, Apr 26 '19 at 09:44
What are those links/downloads? Just normal anchor links to URLs? Or are thos AJAX links? Do you capture the `window.onblur` event? To answer all this, you might want to present a link to a working demonstration — yunzen, Apr 26 '19 at 10:57
/resources/foo is just link to my spring controller which returns byte[]. Onblur event works automatically after downloads complete in other browsers, in Chrome i have to click anywhere on webpage to activate blur listener. — Exik, Apr 26 '19 at 11:23
Interesting. I didn't knew that. Are you sure you do not have any middleware in place that you don't know of (vie plugin, library, etc.) — yunzen, Apr 26 '19 at 11:25
Good question, I just discovered how it works. To force this to download as file there is 'header: Content-Disposition: attachment; filename=;'. I think(hope :/) there isn't any middleware. — Exik, Apr 26 '19 at 11:43
This might help [Detect when browser receives file download](https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download?rq=1) — yunzen, Apr 26 '19 at 12:14

score 1 · Accepted Answer · answered Apr 26 '19 at 12:32

The blur event is just a fragile workaround that might work in a browser or not.

The blur event means, that something is losing focus. It might be that Firefox browser (among others) does indeed blur the link you clicked on, but anything else might blur that link, too (Changing the tab, Clicking on the loading Screen, etc). Which is what you might NOT want.

And because HTTP is a state less protocol, we cannot know on the client side, when this is finished without the help from the server. And you cannot rely on JS to detect this, because the download of the file is 'in a different tab', in a different context which you do not have access to.

The only solution I can imagine (and other's, too, as it seems): When the download starts, start a JS interval that regularly (like every 500ms or so) checks the server for a download status. On the server side you must identify the download to the user when it starts and respond the status back to the client when asked. How this works depends, of course, on the server environment and programming language you use. I know, you can make it work in PHP, but I don't know of all the other languages.

BTW: I would call the 'loading screen' a 'loading indicator', because a loading screen (or splash screen) is a picture that is shown once before a software loads (at least on my computer/brain).

Thanks, I will think about solution similar to what you propose. Maybe the best solution for my case will be removing loading _indicator_. I have only one place where downloading is called and it usually takes ~1 second. — Exik, Apr 26 '19 at 12:40
IMHO Removing is the best idea. Think of all the pages that have download indicators. I could not think of remembering one. — yunzen, Apr 26 '19 at 13:10

score -3 · Answer 2 · answered Apr 26 '19 at 09:42

-3

If you have a Google Account, you can simply press Ctrl + J or go to chrome://downloads/

answered Apr 26 '19 at 09:42

Sci Pred

33
4

How to check if file downloads finished in Chrome?

2 Answers2