Sending files to the browser with AngularJS, WebAPI, not triggering download?

Question

Pulling out my hair on this.

I have a GET request via angular:

x.DeliverFile = function(fileId) {
  $http({
    method: "GET",
    url: myBase + "Services/DeliverFile?FileID=" + fileId,
    headers: myHeaders
  }).success(function(data, status, headers, config) {
    console.log(data);
  });
};

And in WEB API:

If fileinfo.Exists Then
  Dim result As New HttpResponseMessage(HttpStatusCode.OK)
  With result
    .Content = New StreamContent(New FileStream(fileinfo.FullName, FileMode.Open, FileAccess.Read))
    .Content.Headers.ContentDisposition = New Headers.ContentDispositionHeaderValue("attachment")
    .Content.Headers.ContentDisposition.FileName = fileinfo.Name
    .Content.Headers.ContentType = New Headers.MediaTypeHeaderValue("application/octet-stream")

  End With
  Return result

  Else
    Return Request.CreateResponse(HttpStatusCode.NotFound)
End If

I've done this with httphandlers many times, but missing something obviously with web api.

I'm able to see the bytes in via console.log(data);

I can't figure out how to get the browser to trigger the download.

I read this post here: Download file from an ASP.NET Web API method using AngularJS

I'm having trouble accepting the "accepted answer", as there must be a way to trigger a download in a cross-browser compliant manner.

Answer 1

You need to use something like FileSaver.js and then you can do this:

x.DeliverFile = function(fileId) {
  $http({
    method: "GET",
    url: myBase + "Services/DeliverFile?FileID=" + fileId,
    headers: myHeaders
  }).success(function(data, status, headers, config) {
    var blob = new Blob(data, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "fileName.txt");
  });
};