Adding a pause in JS while file downloads

Question

I have a function as follows:

 var audit ={
    init: function(){
      var dte = new Date();
      // hook into the get Accruals Link
      var accruals = $("#accruals");
      for (var i = 0, ii = accruals.length; i < ii; i++){
        $(accruals).bind("click", audit.accrualsClicked);
      }

      // hook into the get closed routes button
      var glbtn = $(".glBtn");
      for (var i = 0, ii = glbtn.length; i < ii; i++){
        $(glbtn).bind("click", audit.clickListener);
      }

      // hook into the GL Date1 element
      var glDate1 = $("#glDate1");
      for(var i = 0, ii = glDate1.length; i < ii; i++){
        var myDate = null;
        if ($("#glDate1").attr('rel') != null) {
          myDate = $.datepicker.parseDate("yy-mm-dd", $("#glDate1").attr('rel'));
        }
        else {
          myDate = dte.getFullYear() + '-' + dte.getMonth()+ '-' + dte.getDate();
        }
        $('#glDate1').datepicker({
          dateFormat: 'yy-mm-dd',
          minDate: -120,
          maxDate: '+1D',//'+1M +10D',
          showAnim: 'fadeIn',
          altField: '#actualDate',
          altFormat: 'yy-mm-dd',
          changeMonth: true,
          numberOfMonths: 2,
          showButtonPanel: true,
          defaultDate: myDate
          //onSelect: audit.doInvDate
        });
        $(glDate1).val(myDate);
      }
      // hook into the GL Date2 element
      var glDate2 = $("#glDate2");
      for(var i = 0, ii = glDate2.length; i < ii; i++){
        var myDate2 = null;
        if ($("#glDate2").attr('rel') != null) {
          myDate2 = $.datepicker.parseDate("yy-mm-dd", $("#glDate2").attr('rel'));
        }
        else {
          myDate2 = dte.getFullYear() + '-' + (dte.getMonth() +1) + '-' + dte.getDate();
        }
        $('#glDate2').datepicker({
          dateFormat: 'yy-mm-dd',
          minDate: -120,
          maxDate: '+1D',//'+1M +10D',
          showAnim: 'fadeIn',
          altField: '#actualDate',
          altFormat: 'yy-mm-dd',
          changeMonth: true,
          numberOfMonths: 2,
          showButtonPanel: true,
          defaultDate: myDate2
        });
        $(glDate2).val(myDate2);
      }
  },
  clickListener: function(event){
    audit.download(7);
  },

  accrualsClicked: function(Event){
    audit.download(6);
  },
  removeFile: function(fileName){
    var url     =  'http://'+window.location.hostname+'/truck/admin/export/service/removeFile.svc.php';
    var args    = "filename="+fileName;
    var res     =  audit.doAjax(url,args);
    //document.getElementById("Msg1").style.display = "none";
    if(res == '0'){
      alert('Failed to purge document: '+ fileName +' from file system')
    }
  },
  download: function(process){
    var gl1 = $('#glDate1').val();
    var gl2 = $('#glDate2').val();
    var url   =  'http://'+window.location.hostname+'/truck/admin/export/service/getFile.svc.php';
    var args  = "process="+process+"&gl1="+gl1+"&gl2="+gl2;
    var fileName =  audit.doAjax(url,args);
    if(fileName.length>3){
      var fileurl = "http://"+window.location.hostname+"/truck/admin/export/service/" + fileName;
      window.location = fileurl;
      audit.removeFile(fileName);
    }
  },
  doAjax: function(url, args){
    var retVal;
    retVal =   $.ajax({  
                    type: "GET",
                    url: url,
                    data: args,
                    async: false
                }).responseText;
    if(retVal==null || retVal=="")retval=99;
    return retVal;
  }
}
audit.init();

This works fine in creating the file and creating the download box. One requirement I have is to remove the file after it is created and the user downloads it. Is there a way to put some type of pause, or listener, so that the audit.removeFile(fileName) does not run until the user either downloads or cancels the request (reference the download: function(process) sub function)?

Answer 1

Unfortunately, the answer is (currently) no on the client-side. The download happens in a different scope than where your page and client-side JavaScript exists. There are no related events you can monitor from within the page.

A couple server-side options that come to mind:

• If your server maintains a lock on the file while it's being downloaded, which many (most?) do, you can safely use an automated process to clear out that temp directory periodically. Just be sure that process skips over files held open by the server and doesn't get hung on them.

• If you serve the download through your own code instead of pointing users at a static file (even if your code ultimately just acts as a middleman to stream that static file down), then you'll know when the download has completed and can delete the file immediately afterward.

Answer 2

As Dave Ward points out, the approach you're describing won't work. I'd simply run a job on a given interval on the server removing all files older than, say 10 minutes.

However, if you need to find a client side solution, you could try to use a popup.

In the global scope, you could add a function:

var popup = window.open(fileUrl);
popup.addEventListener('unload', function(){
  audit.removeFile();
});

Keep in mind that you should never use the unload event for anything important as a number of things can prevent it from running.