Download file with Angular and Django - angularjs

Question

I have a table containing a list of files fetched from the server. I also have a button, that downloads the selected file. So I made a function which call a service and it opens the response (the file) in a new window, so the user can download it.
Controller:
$scope.download = function() {
if ($scope.cancelPromise) {
$scope.cancelPromise.resolve();
}
$scope.cancelPromise = $q.defer();
UserFileSrv.downloadFile.download(
{
fileId: $scope.selectedFile.id
},function(data) {
if (data) {
toaster.pop('success', 'Success', 'success');
window.open(data);
}
}, function(error) {
if (error) {
toaster.pop('error', 'Error', error);
}
}
);
};
The service:
angular.module('app').factory('UserFileSrv', ['$resource', function($resource) {
var userFile = {
downloadFile: $resource('my_url/:fileId/?', {
fileId: '#fileId'
}, {
download: {
method: 'GET',
isArray: false
}
})
};
return userFile;
}]);
The browser shows the 'success' toaster, but it opens a window which contains this string: Cannot GET /%5Bobject%20Object%5D
Note: the Content-Type of the response is: application/json

Answer 1

It seems that you try to pass the downloaded content to the window.open function.
window.open accept the url as the first argument.
You can solve your problem in two cases:
1) Form the url to the resource (ex: 'my_url/12343') and pass it to the window open. But make sure that your server returns your response with header Content-Disposition=attachment;fileName=someFileName. It will force the browser to process the response as an attachment.
2)Otherwise you can use Blob. (it won't work in IE 9 or less)
https://developer.mozilla.org/en-US/docs/Web/API/Blob
Instead of windows.open you can make the following:
function downloadBlob(fileName, blob){
//IE case
if (!!window.navigator.msSaveBlob){
window.navigator.msSaveBlob(blob, fileName);
return;
}
//create url
var url = URL.createObjectURL(blob);
//create invisible acnhor, to specify the file name
var a = document.createElement('a');
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = fileName;
a.click();
setTimeout(function(){
URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 100);
}
var data = {x: 1, y:2, name: 'abc'};
var blob = new Blob([JSON.stringify(data)], {type : 'octet/stream'});
downloadBlob('myData.json', blob)
The full solution which shows how to download blobs with ngResource is here