JQuery: post FormData AND csrf token together

Question

Is the data:.. line below correct? I want to post the form data AND csrf token to a Django view function.

$('#file-upload').on('change', function () {
    var currentpath = window.location.pathname;
    var formData = new FormData($('form')[0]);
    $.ajax({
            url: currentpath,  //server script to process data
            type: 'POST',
            data: {formData, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
            cache: false,
            contentType: false,
            processData: false
        });
});

I should point out that {{ csrf_token }} will only work if this code appears on the body of the template. If it's inside an imported JS file. It wont work. — Bibhas Debnath
There is a workaround to that as well. Define a <div id="csrf">{{ csrf_token }}</div> in your template file. In your imported JS file you can add the token to the FormData object as formData.append('csrfmiddlewaretoken', '{{ csrf_token }}'); — shaktimaan

Musa Musa · Accepted Answer · 2013-05-26T17:47:33

You have to add your parameters to the FormData object (using append) and as always pass the formdata object alone as the data property.

$('#id_image').on('change', function () {
    var currentpath = window.location.pathname;
    var formData = new FormData($('form')[0]);
    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    $.ajax({
            url: currentpath,  //server script to process data
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
});

JQuery: post FormData AND csrf token together

1 Answers