AngularJS save image file sent from Web API 2 - angularjs

Question

I have been trying to follow different posts on downloading a file sent from my Web API. So far I can get the file to come, it will open the download window and it will save. However, I cannot open it so something must be wrong somewhere.
Here is my AngularJS so far.
return $http({
url: State.Endpoint + "/api/account/picture",
method: "GET",
responseType: 'arrayBuffer'
}).then(function (data) {
var octetStreamMime = 'application/octet-stream';
var success = false;
var file = new Blob([data.data], {
type: "image/jpeg"
});
var fileUrl = URL.createObjectURL(file);
var a = document.createElement('a');
a.href = fileUrl;
a.target = "_blank";
a.download = "myFile.jpg";
document.body.appendChild(a);
a.click();
});
That will make my successfully download the image for me. However, this doesn't let me open the file so either something is still wrong on client side or server side.
Server Side Code:
[Route("picture")]
[HttpGet]
public HttpResponseMessage GetPictureBlob()
{
HttpResponseMessage response = null;
var localFilePath = HttpContext.Current.Server.MapPath("~/Content/Images/demo.jpg");
if (!File.Exists(localFilePath))
{
response = Request.CreateResponse(HttpStatusCode.Gone);
}
else
{
var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);
// Serve the file to the client
response = new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK,
Content = new StreamContent(fStream)
};
response.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("attachment")
{
FileName = Path.GetFileName(fStream.Name)
};
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
//response.Headers.Add("content-type", "application/octet-stream");
}
return response;
}

Answer 1

The provided value 'arrayBuffer' is not a valid enum value of type XMLHttpRequestResponseType.
Use arraybuffer all lowercase:
$http({
url: State.Endpoint + "/api/account/picture",
method: "GET",
//responseType: 'arrayBuffer'
//USE arraybuffer lowercase
responseType: 'arraybuffer'
//OR
//responseType: 'blob'
})
When the responseType is not valid, the XHR API defaults to decoding the response as UTF-8. This corrupts binary files such as JPEG images.
For more information, see MDN XHR Web API - responseType.
Creating a Download Button
Instead of creating a <a download></a> element with JavaScript DOM manipulation, consider using the AngularJS framework.
This is an example of a Download button that becomes active after the data is loaded from the server:
<a download="data_{{files[0].name}}" xd-href="data">
<button ng-disabled="!data">Download</button>
</a>
The xdHref Directive
app.module("myApp").directive("xdHref", function() {
return function linkFn (scope, elem, attrs) {
scope.$watch(attrs.xdHref, function(newVal) {
if (newVal) {
elem.attr("href", newVal);
}
});
};
});
The DEMO on PLNKR.

Answer 2

I've done the very same thing with this code, where:
data: Data received from server
format: data format, it must be one of https://developer.mozilla.org/en-US/docs/Web/API/Blob/type
name: your file's name
Code:
function downloadBlobFile(data, format, name) {
// format must be one of https://developer.mozilla.org/en-US/docs/Web/API/Blob/type
var file = new Blob([data], {type: 'application/' + format});
file.lastModified = new Date();
file.name = name + '.' + format.trim().toLowerCase();
// guarantee IE compatibility
if($window.navigator && $window.navigator.msSaveOrOpenBlob) {
$window.navigator.msSaveOrOpenBlob(file, file.name);
}
//other web browser
else {
/**
* Because this technology's specification has not stabilized, compatibility has been
* checked here: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_compatibility
*/
var fileURL = $window.URL.createObjectURL(file);
/* trick for downloading the file, borrowed from:
http://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
*/
var a = angular.element("<a style='display: none;'/>").attr("href", fileURL).attr("download", file.name);
angular.element(document.body).append(a);
a[0].click();
$window.URL.revokeObjectURL(fileURL);
a.remove();
}
}

Answer 3

var a = document.createElement("a"); //Create <a>
a.href = "data:image/png;base64," + ImageBase64;
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
Simplest way worked for me