title: Browser doesn't show progress bar when downloading a file
body: <p>I have an Angular application with an ASP.NET Web API.</p>
  
  <p>I want to download a file stored on my server. Currently, this is the code I have:</p>
  
  <pre><code>[HttpGet]
  [Route("downloadFile")]
  [JwtAuthentication] //Only a connected user can download the file
  public async Task&lt;HttpResponseMessage&gt; DownloadFile(string path)
  {
      HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
      var fileStream = File.OpenRead(path);
      result.Content = new StreamContent(fileStream);
      result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
      result.Content.Headers.ContentLength = fileStream.Length;
      result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
      {
          FileName = fileStream.Name,
          Size = fileStream.Length
      };
      return result;
  }
  </code></pre>
  
  <p>And in my Angular code:</p>
  
  <pre><code>// file-navigation.service.ts
  downloadFile(file: FileElement) {
      const data = { path: this.formatPath(true) + file.name };
      return this.http.get(this.apiUrl + '/downloadFile', { params: data, responseType: 'blob' });
  }
  
  // file-navigation.component.ts
  this.fileNavigationService.downloadFile(element).subscribe(result =&gt; {
      this.generateDownload(element, result, false);
  });
  
  generateDownload(element: FileElement, blob: Blob, isArchive: boolean) {
      const fileName = element != null ? element.name : 'Archive';
      if (navigator.appVersion.toString().indexOf('.NET') &gt; 0) {
        window.navigator.msSaveBlob(blob, fileName + (isArchive ? '.zip' : ''));
      } else {
        const link = document.createElementNS(
          'http://www.w3.org/1999/xhtml',
          'a'
        );
        (link as any).href = URL.createObjectURL(blob);
        (link as any).download = fileName + (isArchive ? '.zip' : '');
        document.body.appendChild(link);
        link.click();
        setTimeout(function () {
            document.body.removeChild(link);
            link.remove();
        }, 100);
     }
  }
  </code></pre>
  
  <p>With this, I successfully download a file from the server. </p>
  
  <p>However, the download bar in Chrome only appears when the download is done. So if the file is too big, the user won't get any indicator that his file is currently being downloaded.</p>
  
  <p>Below is a screenshot of a 16Mb file being downloaded. The server is currently sending data but the download bar doesn't appear.</p>
  
  <p><a href="https://i.stack.imgur.com/uZIMa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uZIMa.png" alt="The size keeps incrementing, but there&#39;s no progress indication"></a></p>
  
  <p>Then, once the download has completed, the file appears in the download bar at the bottom of the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/mdBtF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mdBtF.png" alt="The file shows up but only at the end"></a></p>
  
  <p>How can I send the file to the browser so that it shows this indicator to the user?</p>
  
  <p>Thank you very much.</p>
  
  <p>EDIT:</p>
  
  <p>As @CodeCaster pointed out, redirecting to the URL could work, however, my URL is protected so that only connected users can download the file.</p>