Detecting when FileStreamResult is Complete

Question

I have an ASP.NET MVC app. In my view, I have a button that says "Download". When a user clicks this button, the text changes to "Downloading...". My code for this looks like this:

View.cshtml

<button id="myButton" onclick="downloadClick();"><span>Download</span></button>

function downloadClick() {
  $('#myButton').html('<span>Downloading...</span>');
  window.location = '/download/latest';      
}

This code successfully downloads a file. The controller action located at /download/latest looks like the following:

MyController.cs

public class MyController {
  public ActionResult DownloadLatest() {
    var someUrl = "https://my-domain.com/files/latest";
    using (var fileClient = new HttpClient())
    {
      var file = await fileClient.GetStreamAsync(fileUrl);
      Response.ClearContent();
      Response.ClearHeaders();

      Response.AppendHeader("Content-Disposition", "Attachment; Filename=latest.txt");

      return new FileStreamResult(file, "txt");
    }              
  }
}

The file successfully downloads. However, I can't figure out how to restore the button text to just "download" after the response is retrieved. How do I do that?

Thank you!

An alternative approach to changing the button text is to just use a regular hyperlink with the `href` attribute pointing at `/download/latest` . Then clicking the link will download the document and the browser itself will display a loading symbol . This would present a UX common to many websites, not specific to just your site. — Chris, Mar 19 '15 at 13:24
@Chris right. And [here](http://stackoverflow.com/a/4168965/1849444) is a good way how you can solve your problem with js. — teo van kot, Mar 19 '15 at 13:32

score 1 · Accepted Answer · edited Mar 07 '19 at 16:53

Add a click event to your button that does an AJAX call. Then you can turn the spinner off on return.

$('#adcExportToExcel').click(function () {
          $('#adcExportToExcel').spin('small');
          var data = $("#adcResult").data('gridData');      
          data = JSON.stringify(data);
          var actionUrl = '@Url.Action("GenerateExcelReport", "ADC")';
          var getUrl = '@Url.Action("DownloadExcelReport", "ADC")';

          $.ajax(actionUrl, {
              contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             type: 'POST',
             data: data,
             success: function (d) {
                 if (d.success) {
                     window.location = getUrl + "?fName=" + d.fName;
                 }
             },
             error: function () {

             }
         }).always(function() {
             $('#adcExportToExcel').spin(false);
         });

});

See this blog post

Hello, Nimesh. Welcome to StackOverflow. Even if your code solves the question, a description of what it does would greatly improve the quality of your answer. :) — Bonifacio2, Mar 19 '15 at 13:54

Detecting when FileStreamResult is Complete

1 Answers1