I am retrieving a list of files from a web service and displaying them as links. When someone clicks on the link, the file should start downloading. The problem is that no direct access to the file exists. Here is the process to download a file:

1. User clicks on link
2. Server calls web service to retrieve file
3. Browser is loading for as long as it takes to bring the file back from the web service
4. Browser finally offers file to user for download

To counter the unfavorable user experience of having to wait for the web service before the download starts, I would like to display a "Loading..." feedback dialog when a link is clicked, and have the dialog go away when the file is ready.

I am using jQuery, and have been playing around with adding an iframe to the page to load the file, but the problem I am having is I don't know how to determine that the file is ready.

I am looking for tips, not only on the client side to give ample feedback, but perhaps also on the server side (using ASP.Net), just in case I can do something to streamline the process. Thank you.

Update: To clarify, this is for downloading a file to a user's machine. What I'm specifically looking for is a way to determine when the file is ready for download. So, when step #4 above takes place, I'd like to remove the "Loading..." message.

I am retrieving a list of files from a web service and displaying them as links. When someone clicks on the link, the file should start downloading. The problem is that no direct access to the file exists. Here is the process to download a file:

1. User clicks on link
2. Server calls web service to retrieve file
3. Browser is loading for as long as it takes to bring the file back from the web service
4. Browser finally offers file to user for download

To counter the unfavorable user experience of having to wait for the web service before the download starts, I would like to display a "Loading..." feedback dialog when a link is clicked, and have the dialog go away when the file is ready.

I am using jQuery, and have been playing around with adding an iframe to the page to load the file, but the problem I am having is I don't know how to determine that the file is ready.

I am looking for tips, not only on the client side to give ample feedback, but perhaps also on the server side (using ASP.Net), just in case I can do something to streamline the process. Thank you.

Update: To clarify, this is for downloading a file to a user's machine. What I'm specifically looking for is a way to determine when the file is ready for download. So, when step #4 above takes place, I'd like to remove the "Loading..." message.

• asp
• javascript
• jquery
• download

• By "downloading" do you mean actually saving a file to the user's machine, or do you mean that your web app just needs to acquire some of this large file-based information to perform its work? – Chris Farmer Commented May 8, 2009 at 14:31
• I'm not entirely sure what your asking here - how to display a 'Loading...' dialog, how to load the file into an iframe, or how to measure the progress of the file download? – roryf Commented May 8, 2009 at 14:31
• I've updated the question to add some clarification. – ern Commented May 8, 2009 at 14:38
• If the server does not need to process the file after it downloads, why not just offer the client the download link that the server uses? – Daniel Beardsley Commented May 9, 2009 at 0:07
• Unfortunately all of the files are stored in a database, and the service processes it as a temporary file. Also, I just have access to the web service itself. – ern Commented May 11, 2009 at 14:26

5 Answers 5

It sounds like you need to expose a new request URL on your server, whose only job is to reply whether the web-service-retrieval has pleted (or if not, how far it has got).

Have AJAX poll that service every few seconds, and remove the "Loading..." message when it replied that the file is ready.

The client should send the session ID (maybe also a file ID), so that the server knows which file is being asked about. The server side will need to be able to contact the running web-service-retrieval process/thread to ask it how far it got. (If it can't find the thread then presumably it has finished.)

you can use the plete option for $.ajax function in jquery which should get called when the request pletes

You can have jQuery to wait for the click of the link and when the link is clicked show the display loading message.

Example that shows how to 'Loading - Please wait' Message Display Script you can follow.

EDIT-

Basically you want a progress bar monitor, which I have never seen it done with just javascript, but with flash or ajax.

Here is a File Upload Demo that should help.

If you're linking to an ASHX that is grabbing the file and writing it back to a stream, you can modify the links click event to display a message.

$(function () {
  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    return true; // make sure the link still gets followed
  });
});

The loading message can just be a spinner or something while waiting for the ASHX to write the response back.

Edit: Since you're not directly linking to the ASHX:

$(function () {
  var ashxCallback = function (data, textStatus) {
    // data could be: xmlDoc, jsonObj, html, text, etc...
    this; // the options for this ajax request
    // textStatus can be one of: "timeout", "error", "notmodified", "success", "parsererror" 
    alert(textStatus);
  };

  $("a.someClass").click(function () {
    $("div.message").fadeIn();  // show a loading message
    $.get("some.ashx?id=1234", "", ashxCallback);
    return false;
  });
});

Using jQuery.get() and jQuery.post().

Edit #2: I just had another thought. What if the Loading... message was in an iframe that redirected to the file? So you would display the iframe with jQuery, it would have the default message of Loading... and a little spinner animation, then set the iframe's src/location to the ASHX that takes forever to load. You could then give it an onload handler from the iframe's parent page that would hide/remove it. Let me know if you need sample code.

If preparation for the file takes less than default timeout of AJAX request, you may start AJAX request, displaying "Loading..." message to user. AJAX call then checks for file's availability, and when it bees available - returns with the message (success or not) and gives a link for the file. AJAX request can even do file download, but that's for your option.