Error 'Illegal Invocation' while trying to convert javascript to jquery

Question

I am trying to convert some code from javascript to jquery.

Javascript Code: (I have got this code here)

window.onload = function () {
    document.getElementById('uploader').onsubmit = function () {
        var formdata = new FormData(); //FormData object
        var fileInput = document.getElementById('fileInput');
        //Iterating through each files selected in fileInput
        for (i = 0; i < fileInput.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput.files[i].name, fileInput.files[i]);
        }
        //Creating an XMLHttpRequest and sending
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Home/Upload');
        xhr.send(formdata);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        }
        return false;
    }
}

JQuery Code: (According to my application)

 $('#AutoUploadFiles').click(function () {

        var formdata = new FormData();
        var fileInput = $("#AutomaticUploader");

        for (var i = 0; i < fileInput.get(0).files.length; i++) {
            formdata.append(fileInput.get(0).files[i].name, fileInput.get(0).files[i]);
        }

        $.ajax({
            url: '/members/AutoUploadFile',
            type: 'post',
            data: formdata,
            success: function () {

            },
            error: function () {

            }
        });
    });

When I try to execute the above JQuery code I get 'Illegal Invocation' error in jquery.min.js file.

I am new to Web Programming, so I might have done some mistakes while converting to JQuery. If anybody catches some mistake, please guide me.

there is a problem with the `formdata` object that is passed on `$.ajax` that is the common problem I encounter with it and FormData() is an object that must be serialized before it will send by `$.ajax()` — Netorica, Sep 20 '13 at 10:20

score 1 · Accepted Answer · answered Sep 20 '13 at 10:23

1

the problem is the formdata is an object and can't be serialize as an ordinary string

  var formdata = new FormData();

and in your code

type: 'post',
data: formdata, //<-- this is the problem
success: function () {

formdata must be serialize well as valid json data or else it can't be send by $.ajax() that's why your jquery version will not work. Please try other jquery uploader scripts because there are lot of them in google

answered Sep 20 '13 at 10:23

Netorica

18,523
17
73
108

Ok, thanks. I will try to serialize it and then I will come back to you if the problem persists. – Khushi Sep 20 '13 at 10:25
I got it to work by looking at http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax – Khushi Sep 20 '13 at 12:36

Steel Brain · Answer 2 · 2015-04-15T21:26:42.757

1

The accepted answer doesn't work if you are sending files over the XHR as file objects can not be JSON encoded. The only "workaround" is to disable jQuery's XHR data processing.

To disable it globally use

$.ajaxSetup({processData:false});

or do

$.ajax({
  ... Ajax Stuff Here,
  processData: false
});

on each request.

edited Apr 15 '15 at 21:26

answered Aug 07 '14 at 14:03

Steel Brain

4,321
28
38

I also had to set `contentType: false`, which I found in this answer: [http://stackoverflow.com/a/10899796/957950](http://stackoverflow.com/a/10899796/957950) – brichins Nov 10 '15 at 00:17

Error 'Illegal Invocation' while trying to convert javascript to jquery

2 Answers2