For last few days I have been struggling with a requirement to show file download progress bar. Here’s the requirement.
Web page has a link Download File. On click of this link - a JSON post request is sent to the server. The server generates the files based on the JSON input and streams back with Content-Disposition “attachment” for the browser to download. There are several ways to visually indicate the click of the link:
Normal form post: Create a dynamic form and post it. On the server-side make sure content disposition is set to attachment. When browser receives the response, it pops the Open-Save-Cancel dialogue box.
- No control of the page response time, page dies in case of timeouts
- Page refreshes and the current context of the user is lost
Ajax post: Do an Ajax form post with JSON data. Download “waiting” indicator can be easily initiated with ”Ajax prefilter”. In the response from the server send back the URL to download. Remove the “waiting” indicator. Change the window location to the URL and let the browser do the rest.
- Retain the file on the server and run a background cleanup
Iframe post (Recommended): Create a dynamic form and post (target of the form) it to an iframe. Disable the download link, show the “waiting” indicator. Start the timer and look for presence of a cookie. If the cookie is found, remove the indicator and enable the link. This requires some server side code as well: adding the cookie. The detailed sample code:
- Server has to set an extra cookie
Corresponding client side code:
And the server side code: