Loaded document damaged using blob method in angularJS

Question

File upload in my application worked fine until I updated Angular to the latest version. Even now the file is loading, but the problem is that it is damaged. Downloading the file works fine, and if we check on the file server, the file will be whole. But after downloading, I get a damaged file.

HTML:

<td data-title="''"> <a tooltip="Download CV" ng-hide="!talent.resumePath" tooltip-trigger tooltip-animation="false" tooltip-placement="bottom" ng-click="downloadResume(talent.id)" data-placement="top" data-toggle="tooltip" data-original-title="resume"> <img src="../../img/DownloadIcon.png" /></a> </td> 

Controller:

 downloadResume: function(employeeId) { return apiServices.getFileFromTalentPool('/talentpool/resume?id=' + employeeId) }, 

Where getFileFromTalentPool: https://hastebin.com/yivaterozi.js

End point:

 public FileResult GetResume(int id) { var result = _services.GetResume(id); if (result != null) { HttpContext.Response.ContentType = result.ContentType; HttpContext.Response.Headers["Access-Control-Expose-Headers"] = "FileName"; HttpContext.Response.Headers["FileName"] = result.FileDownloadName; } return result; } 

I usually upload Doc files. I tried with a notepad file to see if this is the same. Strange, but I noticed that I can open the notepad file, but its contents are manipulated by something like [object Object] . But for Doc files, it just shows:

How can i fix this?

Answer 1

it looks like the code https://hastebin.com/yivaterozi.js has been updated from using the deprecated $http.success() method to the current $http.then() . The Promise 'callback function (within the then method) receives only one object argument: https://docs.angularjs.org/api/ng/service/ $ http. The obsolete method of "success" received more arguments (data, status, headers) and data already contained raw data. When using then() data is located in the data property for the response, so try changing your call to $http to:

 $http({ method: 'GET', cache: false, url: fileurl, responseType:'arraybuffer', headers: { 'Authorization': "Bearer " + $rootScope.userInfo.access_token, 'Access-Control-Allow-Origin': '*' } }).then(function (data) { var octetStreamMime = 'application/octet-stream'; var success = false; // Get the headers var headers = data.headers(); ... ... 

note that the headers are retrieved here correctly from the data object, and not from the third argument (just add var since we removed the empty arguments). Now in every place where you use data, change it to data.data, for example:

 // Try using msSaveBlob if supported var blob = new Blob([data.data], { type: contentType }); 

or simply change the argument data in response and add var data = response.data; anf change getter headers = response.headers(); to headers = response.headers(); :

 $http({ method: 'GET', cache: false, url: fileurl, responseType:'arraybuffer', headers: { 'Authorization': "Bearer " + $rootScope.userInfo.access_token, 'Access-Control-Allow-Origin': '*' } }).then(function (response) { var octetStreamMime = 'application/octet-stream'; var success = false; // Get data var data = response.data; // Get the headers var headers = response.headers(); ... ...