ajax posts with django using FormData vs form.serialize()

Question

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.

Answer 1

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');
            }
          }

        });

      }
});

Answer 2

When using FormData, you need to add processData: false to your jQuery.ajax options so jQuery won't try processing something it cannot. So do this, and you should be fine:

var form = $('#theForm'),
    fd = new FormData(form[0]);

$.ajax({
    url: '/customer/create/',
    type: form.attr('method'),
    contentType: 'multipart/form-data',                    
    dataType: 'json',
    data: fd,
    processData: false,
    success: onSuccess,
    error: function(xhr, ajaxOptions, thrownError){
        alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions);
    }
});