How to Resolve/Workaround JQuery Security Exception 0x80530012

Question

So I have a controller that has the following code, the portion below basically just takes a file from an input field and stores it in the file object:

Controller:

$scope.Object = {};
$scope.Object.name = "Joe";
$scope.Object.file = "";

$scope.uploadFile = function()
{
   var reader = new FileReader();
   reader.onloadend = function()
   {
      console.log(reader.result);
   }

   reader.readAsBinaryString($("fileToUpload")[0].file[0]);
   $scope.Object.file = reader.result;

   var uploadPromise = $scope.myService.uploadFile($scope.Object);
   uploadPromise.then(function(success) {
      //do something
   }, function(failure)
   {
      //do something else
   });
}

Service

serviceInstance.uploadFile = function(object)
{
   var deferred = $q.defer();
   $http.put(urlPath, object, {
      cache: false,
      responseType: "json"
   }).success(function(data) {
      deferred.resolve(data);
   }).error(function(data, statusCode) {
      deferred.reject((statusCode: statusCode, data: data));
   });

   return deferred.promise;
};

But what ultimately happens is I get a Security Exception 0x80530012 which states The operation is insecure.

I'm just wondering if there is a workaround I can use here to pass back a file in a javascript object?

Answer 1

As answered elsewhere , you cannot directly load the value of a file field from JavaScript. To allow this would be to allow scripts to directly access your disk. Rather than running the uploadFile function of yours as a direct http.put(), you need to put that file in as a file input field, and submit that form.