How to download a file with events as like that of Ajax Upload. Its impossible to attach an event before and after a download through javascript. Browser doesn’t allow this type of events for security reasons. Usually a file can be downloaded simply clicking on <A> link pointing to the URL and browser prompts a save dialog to the user.

A file download sometimes may take several minutes, there is no way to display a progress message (ex: downloading.. please wait) to the user like that of Ajax loading (once save dialog displayed , it should be hidden).

I have developed a Javascript plugin and server side code in C#(any language it will work as long as same pattern used) to make this possible. This plugin is entirely developed using MS Ajax code and it well works with other libraries(JQuery etc..). I have used IFrame along with cookies for this.

You’ll require MS Ajax library(MicrosoftAjax.js, go for .Net 3.5 to work with JQuery) to use this plugin(included in the demo) otherwise download it from http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js

Now I’ll explain how to use this plugin in any page

First of all,  include MS Ajax library(MicrosoftAjax.js) and (MSAjaxDownload.js) in the html head section

<script src="<yourpath>/MicrosoftAjax.js" language="javascript" type="text/javascript" />

<script src="<yourpath>/MSAjaxDownload.js" language="javascript" type="text/javascript" />
 

Now you have to create a simple javascript object  AjaxDownload. Use this object to perform download and attach events. It takes an optional single parameter "download url".

You can use any library on the client side to do this(I have used JQuery in the demo).

var dn = new AjaxDownload(<downloadurl>); // see the default.htm in the demo

The main methods of this object are as listed below (explore source code for other events, I’ll provide documentation soon)

1) add_onBeginDownload : fires before downloading.

   add_onBeginDownload(<javascript method>)

  You can call this method any number of times and attach different methods but they will be executed in the sequence.

2) add_onEndDownload : fires after Save Dialog opens or after an error response.

       add_onEndDownload(<javascript method>)

      You can call this method any number of time to attach multiple events.

3) add_onSuccess : fires after Save Dialog Opens(Successfully received response from server)

4) add_onError :  fires after an error. Error might be on the server or with an invalid url request.

5) EnableTrace : enables tracing to browser javascript console

     EnableTrace(boolvalue)

6) GetParameters : Get the parameters associated with the URL. Return type is always NameValueCollection

7) SetParameters : Set the parameters associated with the URL. Accepts a NameValueCollection object which is defined in the plugin

    SetParameters(namevaluecollection)

8) AddParameter : adds a parameter to the parameter collection

      AddParameter(name)

9)  GetURL : Gets the URL

10) SetURL : Sets the URL

11) GetLastError: Gets the last error occured.

you can attach any javascript method to add_onBeforeDownload, add_onAfterDownload, add_onSuccess, add_onError events(refer MS Ajax handlers).

Example code

var dn = new AjaxDownload('http://<serverurl>/');
dn.AddParameter('fileName', 'xyz'); 
dn.EnableTrace(true);
dn.add_onBeginDownload(beforeDownload); 
dn.add_onEndDownload(afterDownload); 
dn.add_onSuccess(onSuccess); 
dn.add_onError(onError); 
function beforeDownload()
{ 
  alert('before download');
} 
function afterDownload()
{
  alert('after Download');
}
function onSuccess()
{ 
  alert('file download success');
} 
funtion onError() 
{ 
  var err = dn.GetLastError();
  alert('file download error'+err);
}

DEMO

I have configured a demo at http://www.rajbandi.dev/Demos/AjaxDownload

Download

Files can be downloaded from Microsoft MSDN code library http://code.msdn.microsoft.com/AjaxFileDownload

Browsers supported

I have tested in the following browsers and it worked well

a) MSIE(6+)

b) Firefox(3.5)

c) Opera (9)

d) Chrome