title: Downloading a large blob from API to user doesn't show download until complete
body: <p>My issue is similar to <a href="https://stackoverflow.com/questions/52872006/angular-download-large-blobs">this one</a> but it was an old post without much context or detail, so here's what I got:</p>
  
  <p>When my component calls the download file method, which in turn calls the download file service, the service makes the HTTP GET request from my API which streams a blob back to service.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>    this.svc.getDownloadFile(fileID, fileName).subscribe(res =&gt; {
        console.log(res);
      });
    }
  </code></pre>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>  getDownloadFile(fileId: number, fileName: string): Observable&lt;any&gt; {
      return this.http.get(this.downloadFileUrl + "/" + fileId, {
        reportProgress: true,
        observe: "events",
        headers: this.getHeaders(),
        responseType: "blob"
      });
    }
  </code></pre>
  
  <p>The problem is that because it is an API call, the blob streams through the XHR and I can see it downloading and its progress in the Network tab in Chrome. The problem I am having is getting some sort of browser download notification that you would usually expect when downloading a file in Chrome (or any browser), this only happens after the entire response is complete. </p>
  
  <p>For example I have a 50MB file in the database. The user clicks a link to download the said file from Angular app, the component calls the service which in turn does an API call which gets the file from the DB and streams it as a blob response. Angular takes this response, waits until it has downloaded all 50MB then shows the download dialog. </p>
  
  <p><a href="https://i.stack.imgur.com/r1Cj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r1Cj0.png" alt="Download notification only shows up after its 100% complete"></a></p>
  
  <p><a href="https://i.stack.imgur.com/n0xtO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n0xtO.png" alt="Network Tab shows download in progress"></a></p>
  
  <p>The API is returning the Content Disposition header along with content length, content type , filename etc. I have googled all over and searched high and low for something to mimic this, I kind of understand that the browser doesn't automatically download it as usual because the request is being piped through Angular and the browser doesn't automatically just assume that all blob XHR should be saved.</p>
  
  <p>I tried using: <a href="https://www.npmjs.com/package/streamsaver" rel="nofollow noreferrer">https://www.npmjs.com/package/streamsaver</a>
  but this package actually only handles files that are already stored, not ones being sent from API as blobs.</p>