Submitting a file with jQuery.ajax gives TypeError

Question

I am trying to submit a file from a form using jQuery's ajax method:

var ofile=document.getElementById('image').files[0]; var formdata = new FormData(); formdata.append("image",ofile);  $.ajax({     url:'elements/save_elements',     data:formdata,     type:'POST' }); 

This results in the error TypeError: 'append' called on an object that does not implement interface FormData.

What causes this error? It doesn't happen on the actual formdata.append, but inside jQuery.

Answer 1

I was having the same problem with similar code. There's a severe dearth of information about this error, so since the OP didn't elaborate:

With some debugging I realised the error was being thrown by the ajax call in the depths of jquery, not the actual append. Turns out I'd forgotten to add processData: false, contentType: false to the ajax request; Doing so fixed the problem.

Answer 2

It works fine when you add the the following to the ajax object:

contentType: false, processData: false, 

So it should look like:

$.ajax({     url:'elements/save_elements',     data:formdata,     type:'POST',     contentType: false,     processData: false, });