Question

175

Progress/busy indicator while waiting for file download in javascript?

rated 0 times [ 181] [ 6] / answers: 1 / hits: 15585 / 15 Years ago, fri, may 15, 2009, 12:00:00

here is the situation:
In the web application, user selects some options, submits form, and PDF file is dynamically generated on the server side and offered for download.

The problem:
The generation of PDF file takes quite long (up to 1 minute). Some users think nothing is hapening and keep clicking the submit button again and again increasing server load and slowing it down even further.

I thougt about adding some busy indicator, which would show animated picture and message like Please wait, your file is being generated, which seems very easy to do.

But: how to hide this indicator when the file is ready and file download dialog pops up? Otherwise, the message stays on screen even after the user has downloaded the file!

Seems very basic requirement, but I'm completely stuck. Thanks for any suggestions!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 React useEffect (with []) is called every time I change page (React Router)

Fri, Oct 25, 19, 00:00, 5 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

View All

answered 15 Years ago melody · Accepted Answer

I've had to do this for something that took a lot longer (converting a video's format). It might seem like overkill to you but it did work.

Move your PDF code out of process.

When a job is started create a unique job ID and save it to session. Tell the PDF creator this ID.

Make it write a status file (named as the job ID) to the server so that it writes 0% complete and updates it every few seconds (this part depends on you being able to have a progress metric in your process... If it doesn't then this won't work)

Use JS to pull that file down. You can display the progress to the user.

When the progress equals 100% complete, push them to the PDF's location. It might help if you name this as the job ID too.*

*We had another download script that renamed it to a nice name (based on the original video filename) using the content-disposition header, but that's really up to you!

Edit: I should add that the waiting page was the result of clicking submit. It was a new pageload but there's no reason you couldn't AJAX the whole process, just make sure, as others have said, to disable the submit button on the first click to stop the user going ape on it.