ajax formdata : Illegal invocation

Question

I try to make ajax script for upload for Symfony 2. Chrome returns this error:

Uncaught TypeError: Illegal invocation jquery.min.js:4

I think it's due to the FormData object not correctly constructed (I try the script with .serialized():

$(document).ready(function() {
  $('#formImage').submit(function(event) {
    event.preventDefault();
    // appel Ajax
    alert("ajax");

    var input = document.getElementById("rasta_blogbundle_imagetype_file");
    console.log(input); 
    var formdata = false;  

    if (window.FormData) {  
        formdata = new FormData();
        console.log('formdata initialized ...');  
    }
    else{
        console.log('formdata not supported');
    }

    formdata.append('name',$('#rasta_blogbundle_imagetype_name').val());
    console.log(formdata);
    formdata.append('file',input);
    formdata.append('_token',$('#rasta_blogbundle_imagetype__token').val());
    console.log(formdata);    
    //alert(DATA);

    if (formdata){  
        $.ajax({
            url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
            type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
            cache: false,
            //data : $(this).serialize(),
            data: formdata ,
            success: function(data) { // je récupère la réponse du fichier PHP
                $('#myModal').html(data);
                console.log('ok');
            }        
            //return false; //
        }); 
    }
  });
});

Possible duplicate of [jQuery - Illegal invocation](https://stackoverflow.com/questions/10324594/jquery-illegal-invocation) — Abhishek Pandey, Aug 09 '19 at 07:25

score 273 · Accepted Answer · answered Mar 03 '14 at 01:26

273

jQuery tries to transform your FormData object to a string, add this to your $.ajax call:

processData: false,
contentType: false

answered Mar 03 '14 at 01:26

djangonaut

7,233
5
37
52

1

See full, working example here: [http://stackoverflow.com/a/10899796/957950](http://stackoverflow.com/a/10899796/957950) – brichins Nov 10 '15 at 00:16
1

It's superb works totally fantastic. Well its really amazing to know that how some small missing configurations can spoil your work. Thanks a lot bro – Jaydeep Goswami May 20 '19 at 10:39
Man! This killed hours of mine. – Mahbub Mar 21 '22 at 09:44

score 4 · Answer 2 · answered Sep 05 '17 at 13:09

4

it occurs sometime when jquery internally not serialize data correctly data to fix it add this.

cache : false,
dataType    : 'json',
processData : false,

answered Sep 05 '17 at 13:09

user889030

4,353
3
48
51

score 3 · Answer 3 · answered Jun 16 '21 at 12:00

3

I have solved the issue just by adding following these:

contentType: false,
processData: false,
cache: false,

answered Jun 16 '21 at 12:00

Ibnul Quayum

119
4

ajax formdata : Illegal invocation

3 Answers3

Linked