ajax posts with django using FormData vs form.serialize()
ajax, django, forms, jquery
Solution
I needed to do something like this:
$('#cover_url_file_input').on('change', function(e) {
var file, imgData;
file = this.files[0];
if (file) {
imgData = new FormData();
imgData.append('cover_url', file);
$.ajax({
type: 'POST',
url: $('#cover-form').attr('action'),
data: imgData,
processData: false,
contentType: false,
cache: false,
success: function(result) {
if (result.info === 'OK') {
console.log('OK');
}
}
});
}
});
Problem
I want to post a form in django using jquery. I want my form to be able to post a file too. Using form.serialize() as I have read wont pass the contents of the file field. So I read about FormData. But when I use FormData my django view won't recognize it as ajax request. My code (using serialize) ``` $.ajax({ url:'/customer/create/', type: form.attr('method'), contentType:'application/x-www-form-urlencoded;charset=utf-8', dataType:'json', data:form.serialize(), success:onSuccess, error: function(xhr, ajaxOptions, thrownError){ alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions); } }); ``` and with form data ``` fd = new FormData(form) $.ajax({ url:'/customer/create/', type: form.attr('method'), contentType:'multipart/form-data', dataType:'json', data:fd, success:onSuccess, error: function(xhr, ajaxOptions, thrownError){ alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions); } }); ``` Am I missing somethig here? I am not sure this must be the correct contentType. Also mutipart/form-data is set in enctype attribute of the form. Also I know about jquery-forms, but don't want to use it yet. I only want this to happen at one form of mine so I don't want to load it in my page. I want to see if there is a solution before going there.