Downloading a file from Azure Storage to client using Angular2 with .NET Web Api 2

Question

I am trying to download a 1GB file from blob storage into the client. I used before Memory Stream and I get OutOfMemory exception.

now I am trying to open a read stream from the blob and send it directly to the client.

 [HttpGet]
 [ResponseType(typeof(HttpResponseMessage))]
 public async Task<HttpResponseMessage> DownloadAsync(string file)
 {
     HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
     var stream = await blob.OpenReadAsync("container", file);
     result.Content = new StreamContent(stream);
     return result;
 }

The file is downloaded correctly, but the problem is: The code download the complete stream in the client, then the client sees the downloaded file. I wanted the client to see the file as being downloaded, so the user knows that he is downloading something. Not just blocking the request and wait till it finished.

I am using FileSaver in Angular2:

this.controller.download('data.zip').subscribe(
      data => {
        FileSaver.saveAs(data, 'data.zip');
      });

Has anybody an idea how to fix it?

Thank you!

@Neel unfortunately, not! If you find the solution to the problem, please feel free to add it as an answer, so other developers can learn from it. Thank you! — Samy Sammour, Sep 17 '18 at 12:04
@SamySammour I am having similar issue. Do you how to resolve it? — ark, Mar 18 '20 at 17:12
@ark no, I did download the item directly from the Blob storage instead of the server — Samy Sammour, Mar 18 '20 at 20:51

score 2 · Answer 1 · answered Nov 15 '17 at 09:43

To fix it you'd need to use the following javascript code instead:

var fileUri = "http://localhost:56676/api/blobfile";  //replace with your web api endpoint
var link = document.createElement('a');
document.body.appendChild(link);
link.href = fileUri;
link.click();

And then in your backend, make it like so:

HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
var stream = await blob.OpenReadAsync("container", file);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
    FileName = "data.zip"
};
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
return result;

unfortunately, it did not solve the problem. The download still does not appear in the browser downloads. but it is running in Requests when Network tab in Google Chrome is open. — Samy Sammour, Nov 15 '17 at 13:04
It works for me. Did you clear the browser cache when you test it? — Aaron Chen, Nov 16 '17 at 05:16

score 0 · Answer 2 · answered Apr 09 '19 at 15:10

I had the same problem.

The Solution I sorted out was -

First thing, the expected behaviour can occur only when client tries to download the file from blob and usually I prefer downloading the file from the client itself.

As in your case, try to get file blob uri and do some operations as below to open file in browser using Angular Router or simply window.location.href.

window.location.href = “https://*/filename.xlsx”

This worked for me.

Downloading a file from Azure Storage to client using Angular2 with .NET Web Api 2

2 Answers2

Linked