0

On my web app the user can generate a CVS file that can get pretty large 10+ Mb sometimes. The report obviously can take some time to generate. I want to display a throbber for the user while the report is being generated, once they are prompted to save/run I want the throbber to hide. Is this possible?

joey_g216
  • 796
  • 9
  • 23

3 Answers3

1

No, it's not really possible to detect when the file arrives and the user saves it. You're pretty much stuck just updating your throbber and offering a continue link when they're ready to continue.

If this was possible then the download sites would use it to auto-forward you to the download list when you're finished at the file's landing page.

Anthony Mills
  • 8,676
  • 4
  • 32
  • 51
  • Yeah I had a feeling this was going to be tricky. Is there really any sort of method to let the user know that heavy processing is taking place in the background besides the continue link/throbber? – joey_g216 Dec 17 '10 at 23:11
  • Ok, fine, it's possible, but a lot of effort. Let's say you redirect to the CSV to start the download, put an empty progress bar up, and `setTimeout` to set a callback. Some amount of time later, you use XMLHttpRequest to ask the server the progress of the download in that session. It tells you, then you `setTimeout` again for another period of time. On the server, you'd set a session variable to track CSV creation progress. Once the server says it's done, do your completion code. You could go even more complicated with WebSockets and node.js on the server, but let's not get crazy here. – Anthony Mills Dec 22 '10 at 15:15
0

Yes, typically heavy operations in JavaScript are split into chunks and then called from a setInterval. The timeout keeps the page from freezing up. 

var csvTxt = "";
var isDone = false;
addPart = function(){
    csvTxt += addTextFromLongCalculation();
    if(csvTxt > 10000000) isDone = true; // this is an arbitrary example
}

var handle = setInterval(function(){
   addPart();
   if(isDone){
        clearInterval(handle);
   }
}, 20);
mwilcox
  • 4,065
  • 23
  • 20
  • This is good for splitting, but he wants to add the throbber too...so in addition to your splitting, the answer to this question - http://stackoverflow.com/questions/357323/showing-a-throbber-during-html-page-load-and-rendering/417710#417710 should help him get where he wants to be. – Ben Jones Dec 17 '10 at 21:30
0

I'm guessing that you are posting some data, generating the CSV on the server, setting the content-type and waiting for the browser's save dialog to appear. Correct?

In that case, I think you will be disappointed. I spend quite some time trying to find events that would fire for this exact scenario and I couldn't figure it out. I finally had to do something convoluted like use XHR to poll the status of the file creation. Once I got the response I wanted, I hid the throbber and requested the CSV.

To be clearer:

  • Show the throbber
  • Use XHR to tell the server to start the CSV generation
  • Use XHR to poll the status of the CSV creation
  • Once file creation is complete:
    • add an invisible iframe to the document that points to the newly created CSV and have the server add the content-disposition header to it.
    • Hide the throbber after a short delay (you can try to time it so that the throbber is hidden after the file save window is shown, but while the user is interacting with the window). You could also possibly detect the window blur event for hiding the throbber, but I'm pretty sure that won't be very reliable.
Hemlock
  • 6,130
  • 1
  • 27
  • 37
  • 1
    This belongs as a comment, not an answer. I am aware that you don't yet have enough rep to comment on arbitrary questions. – Matt Ball Dec 17 '10 at 22:43
  • And so I did what I could. I figured I could help the OP, but I needed more info. – Hemlock Dec 18 '10 at 03:17