CODEWITHSUNDEEP
javascripthtmlbrowserdownload
Aldian
Aldian

Reputation: 2622

What is the proper way of preventing user interaction while downloading a file?

Ok so this is a general question about browser interaction and HTTP mechanims

Here is the scenario

  1. There is a very rich interface with a lot of buttons.
  2. The user clicks the button "generate the report"
  3. Then there is a loading time of approximately 15 seconds and then the "save file" dialogue box appears
  4. The user saves the files wherever he wishes and do further stuff.

Now I want to:

All this actually sums up to "how to detect the appearance of the download dialog box in javascript" because once this one is solved, this is easy to set up some mask during the file generation, and to do whatever is required once the event has been detected.

Unfortunately it seems like there is no way to launch a file download via Ajax because it lacks adequate handling for turning an XMLHttpRequest into a save as dialog box. As a consequence you need to submit some form, but the mechanism is a little weird because although you submitted the form absolutely nothing happens in the DOM. Then the browser detects that response to the form submission is an incoming file and shows a download box instead of trying to display the file content, and once the user is done with the download box, the browser somehow manage to restore the interface in its previous state so that the user can keep on browsing (or at least this is how I understand the thing).

Upvotes: 2

Views: 916

Answers (2)

IazertyuiopI
IazertyuiopI

Reputation: 488

Display a loading sign for x seconds, disable click events (see here) or replace them with a dialog saying they should stay quiet while it loads.
Do not forget to make the loading sign moving/showing progress or they will get bored. I'm sure there are plenty of libraries to achieve this, you could even try using the <'progress'> tag.
As @j3r3m7 said, if they want to close the browser they will; the goal here is to make user understand he has to wait for x seconds and make him eager to wait.

As for your other issue, please look here

EDIT : A helpful plugin to address these kinds of issues can be found here.

Upvotes: 1

j3r3m7
j3r3m7

Reputation: 782

Interesting question as in essence you can't stop the user from doing anything really... they could if so inclinded:

  • close their browser
  • enter a url directly to go to a new page
  • click back in the browser
  • open a new browser window and navigate to the report generation page for a second time
  • refresh the page

So, if you have a long running process quite a good way to deal with it is:

  • indicate that the process may take a while
  • at the point that the report is ready provide a unique link to the generated report
    • if you are using a javascript framework like AngularJS you could asynchronously handle an event that shows a report download/view link when the report is ready.

Upvotes: 1

Related Questions