Security Exception 0x80530012 when passing jQuery with attached file. Angularjs

Question

I'm getting the following error:

[Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)" location: "http://code.jquery.com/jquery-1.9.1.js Line: 2257"]

I've tried to look up the code but I can't find what the exception is. Simply put I have an Angularjs object being passed that looks like:

replyForm = {

    body: someString,

    // Gets the file from some input
    fileAttachment: event.target.files[0]

}

And I have a function that recieves the replyForm object and tries to pass it into some function like so:

var exe = function (replyForm){

    //This is the line that causes my mozilla security exception to go off
    sendForm(replyForm);
};

var sendForm = function(replyForm){

    // This is when I get the security exception
    $('input.fileInput').val(replyForm.fileAttachment);
};

If you want to see how my fileAttachment gets set in Angularjs, please refer bellow:

.directive('ngFile',function(){
            return {
            scope: {
                ngFile: '='
            },
            link: function(scope, el, attrs){
                el.bind('change', function(event){
                    scope.$apply(function(){
                        scope.ngFile = event.target.files[0];
                    });

                });
            }
        };
    });

It would be great if anyone could tell me what was wrong with passing an object with a file attached to one of it's properties. Though it seems there is an issue with jQuery trying to do something to the dom which creates some security exception.

For reference: 0x80530012 is `NS_ERROR_DOM_SECURITY_ERR` – Wladimir Palant Oct 27 '13 at 08:01 — Wladimir Palant, Oct 27 '13 at 08:01

score 1 · Accepted Answer · edited May 23 '17 at 12:05

After you peel away the layers, the line you are referring to is trying to set input.value on a file input field. This isn't possible for security reasons. The value of a file input field has to be selected by the user, it cannot be set by JavaScript.

If you need to upload a file, you don't need a file upload field for that - a FormData object can handle that for you. Something along these lines should work:

var sendForm = function(replyForm){
  var fd = new FormData($("#myform"));
  fd.append("fileInput", replyForm.fileAttachment);
  ...
  $.ajax({..., data: fd});

FormData is supported starting with Firefox 4, Chrome 7 and IE 10.

Security Exception 0x80530012 when passing jQuery with attached file. Angularjs

1 Answers1

Linked