Jquery and HTML FormData returns "Uncaught TypeError: Illegal invocation"

Question

I'm using this script to upload my image files: http://jsfiddle.net/eHmSr/

$('.uploader input:file').on('change', function() {
  $this = $(this);

  $('.alert').remove();

  $.each($this[0].files, function(key, file) {
    $('.files').append('<li>' + file.name + '</li>');

    data = new FormData();
    data.append(file.name, file);

    $.ajax({
      url: $('.uploader').attr('action'),
      type: 'POST',
      dataType: 'json',
      data: data
    });
  });
});

But when I click in upload button, the JavaScript console returns this error:

Uncaught TypeError: Illegal invocation 

Can you help me?

Solution 1

jQuery processes the data attribute and converts the values into strings.

Adding processData: false to your options object fixes the error, but I'm not sure if it fixes the problem.

Demo: http://jsfiddle.net/eHmSr/1/

Solution 2

I had the same problem

I fixed that by using two options

contentType: false
processData: false

Actually I Added these two command to my $.ajax({}) function

Solution 3

Adding processData: false to the $.ajax options will fix this issue.

Solution 4

My experience:

  var text = $('#myInputField');  
  var myObj = {title: 'Some title', content: text};  
  $.post(myUrl, myObj, callback);

The problem is that I forgot to add .val() to the end of $('#myInputField'); this action makes me waste time trying to figure out what was wrong, causing Illegal Invocation Error, since $('#myInputField') was in a different file than that system pointed out incorrect code. Hope this answer help fellows in the same mistake to avoid to loose time.

View more solutions

Comments

[Caio Tarifa]

Thanks, but I need to remove this property, see this question: stackoverflow.com/questions/12431760/….

[Caio Tarifa]

I fix it, just adding contentType: false. Thanks again!

[Suchit kumar]

@Blender This same code is working in my system but not in my friends(both are using windows 10) ,file is not getting posted.No error in console.

[lilalinux]

In my case the problem was, that I used var data = {}; However, you must use var data = new FormData();

[yainspan]

I couldn't figure out why this wasn't working... until I realized that process is spelled with one c, not two.

[maswerdna]

@Yaakov's comment might not be the right answer but this saved me a serious headache. After trying a whole lot of options, I realized that processData was misspelled as processDate 😁

[alex]

Can these be used with $.post? if so how??