Q:

Download file with Angular and Django

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

A:

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

