Question

I’m trying to upload a file through ajax but when I’m trying to access that file I’m getting this error:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object

In jquery min on line :

 b = f.isFunction(b) ? b() : b, d[d.length] = encodeURIComponent(a) + "=" + encodeURIComponent(b)

Here is my jquery code:

$('#new_ar_bji_o_involved').submit( function(e){

    e.preventDefault();
    selectedid = $(this).attr('id');
    var report ={};
    report.authenticity_token = $(this).find('input[name=authenticity_token]').val();
    report.utf8 = $(this).find('input[name=utf8]').val()
    //$(this).serialize();
    report.other_involved = {};
    report.other_involved.ar_bail_juvinfo_id = $(this).find('#ar_bj_info_id').val();
    var d = document.getElementById('ar_bji_o_involved_mugshot');
    var B = d.files[0];
    report.other_involved.mugshot = B;

    $.ajax({
        type: "POST",
        url : "url?format=json",
        cache: false,
        data: report,
        contentType: "application/json",
        dataType: "json",
        success:function(data){
            //alert(data);
        },
        complete: function (data) {
             $("#dialog-message").dialog("open");
        }
    });     
}); 

My form

<form accept-charset="UTF-8" action="/crash_report/ar_save" class="changedateformat" enctype="multipart/form-data" id="new_ar_bji_o_involved" method="post">

<input id="ar_bji_o_involved_mugshot" name="ar_bji_o_involved[mugshot]" type="file">
</form>

I’m using ruby on rails carrier wave gem to upload the file. But I’m getting error before the controller is called in firebug.

I have this code which works fine:

var d = document.getElementById('imgid');
A = new FormData();
var B = d.files[0];

A.append("contentType", "application/json");
                A.append("key", "b7ea18a4ecbda8e92203fa4968d10660");
A.append("employeeEvent[external_doc]", B);
A.append("employeeEvent[description]", $('#descriptionid').val());
A.append("employeeEvent[user_id]", $('#user_id').val());

var xhr = new XMLHttpRequest();
 xhr.open("POST", "/employee_management/add_event?format=json", true);   // <-- provide the proper URL

xhr.send(A);

May be you guys can suggest something from here?

Thanks in advance.

Answer 1

you cannot post a multipart form through AJAX because Javascript does not have access to your filesystem.

Use Remotipart. It makes ajax uploads much simpler way.