Why I get empty data sent by ajax request?

Question

There is a form. It has a field for uploading a file. I submit this form and send it to server by ajax request, post method.

var frm = $('#contact_form');
frm.submit(function (e) {
    e.preventDefault();
    var data = new FormData()
    data.append('file', $('#id_file')[0].files[0]);
    $.ajax({
        beforeSend: function(jqXHR, settings) {
            jqXHR.setRequestHeader('X-CSRFToken', $('input[name=csrfmiddlewaretoken]').val());
        },
        type: frm.attr('method'),
        method: 'POST',
        url: '',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log(data)
        }
    });
    return false;
});

I'm use the formdata. I look at the client - there is data. But they do not come to the server (request.POST={}). What could be the reason?

def post(self, request, *args, **kwargs):
    print(request.GET, request.FILES, request.POST)
    contact_form = ContactFormForm(request.POST, request.FILES)
    if contact_form.is_valid():
        contact_form = contact_form.save()
        file = request.build_absolute_uri('/')[:-1] + settings.MEDIA_URL + str(contact_form.file)
        return JsonResponse({})
    else:
        response = {}
        for k in contact_form.errors:
            response[k] = contact_form.errors[k][0]
        return JsonResponse({'response': response, 'result': 'error'})

Headers

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Connection: keep-alive
Content-Length: 217843
Content-Type: false
Cookie: csrftoken=xEVnU5IVNTff6r2gft5Sn1wjf9bB0N5UAXrZ1lEsBUCeAlZZwnRBSKVbBEqirQ2K
Host: 127.0.0.1:8002
Origin: http://127.0.0.1:8002
Referer: http://127.0.0.1:8002/contacts/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
X-CSRFToken: MKW45AcnL9digoNWyJ4gi4pb2LVMxbBDP3sGcQ8UzaAhKiKFPDQZNNO3ogatYeyt
X-Requested-With: XMLHttpRequest

Body

------WebKitFormBoundaryALIAgAcqetpuKz4M
Content-Disposition: form-data; name="file"; filename="Screenshot from 2019-08-05 12-02-45.png"
Content-Type: image/png


------WebKitFormBoundaryALIAgAcqetpuKz4M--

I think you need to use append method of FormData. check [this](https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery) post. — Nalin Dobhal, Sep 04 '19 at 10:59
can you check in your browser dev tools, network tab, the request headers and request body? as mentioned above, if your form only has a file field, it won't be part of the form data unless you append it. — dirkgroten, Sep 04 '19 at 11:08
@dirkgroten But can this be due to the fact that `cookies` and `csrf` do not match? — unknown, Sep 04 '19 at 11:09
no, then you would have an error and your view wouldn't be reached. — dirkgroten, Sep 04 '19 at 11:10
As you can see, your Content-Type header is wrong. It should be multipart/form-data and have the boundary attribute. — dirkgroten, Sep 04 '19 at 11:15
And you can also see that your file isn't added, it's empty. — dirkgroten, Sep 04 '19 at 11:15
Why do you set `contentType` to false? You are not uploading file — Alex, Sep 04 '19 at 11:17
@dirkgroten If I add `'multipart/form-data; boundary=${System.currentTimeMillis()}"'` I get ` ` on the server — unknown, Sep 04 '19 at 11:32
you should set it to false, but you also nee to add the file!!! `formData.append("filename", inputId.files[0]);` And you can't set the boundary manually because it won't correspond to the boundary in the actual request body. — dirkgroten, Sep 04 '19 at 12:03
Possible duplicate of [Sending multipart/formdata with jQuery.ajax](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — dirkgroten, Sep 04 '19 at 12:05
Again, look at your request headers and body to find out what’s wrong. I couldn’t see the method in the previous headers you showed. — dirkgroten, Sep 04 '19 at 12:26

score 0 · Accepted Answer · answered Sep 04 '19 at 13:40

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = jQuery.trim(cookies[i]);
    // Does this cookie string begin with the name we want?
    if (cookie.substring(0, name.length + 1) == (name + '=')) {
      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
      break;
    }
  }
}
return cookieValue;
}

function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$(document).ready(function() {
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});
});

var frm = $('#contact_form');
frm.submit(function (e) {
    e.preventDefault();
    $.each($("div[class^='contact_form_']"), function(ind, value){
        $(value).hide();
        $(value).prev().css('border', 'none')
    })
    var formData = new FormData($('#contact_form')[0]);

    // Attach file
    for(var pair of formData.entries()) {
       console.log(pair[0]+ ', '+ pair[1]);
    }
    var ajax = new XMLHttpRequest();
      ajax.open("POST", '');
      ajax.send(formData);
});

how and why does this fix the problem? Was it a CSRF issue was GET/POST the wrong verb action? — user1529413, Jul 10 '22 at 09:43

Why I get empty data sent by ajax request?

1 Answers1