AngularJS save image file sent from Web API 2

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

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 2

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 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