Django-ajax: CSRF verification failed. Request aborted

Question

I am working with django server side form to save details in DB.

<form id="form_save_file" enctype="multipart/form-data">
{% csrf_token %}
      <label class="control-label col-md-4">File:</label>
        <div class="col-md-8">
            {{form.fa_file}}
        </div>
      <label class="control-label col-md-4">Name:</label>
        <div class="col-md-8">
            {{form.name}}
        </div>
</form>

I am using ajax to post request.

$("#form_save_file").submit(function(e) {
        $.ajax({

           type: "POST",
           url: '/url/',
           data: $("#form_save_file").serialize(),
           contentType: false, 
           processData: false,
           success: function(data){}
});

I have included middleware classes in settings.py

MIDDLEWARE_CLASSES = (
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'request.middleware.RequestMiddleware'
)

When I removed contentType and processData in ajax request, request.FILES is empty in views.py and otherthings are working fine.

Community · Accepted Answer · 2017-05-23 11:46:04Z

2

contentType option to false is used for multipart/form-data forms that pass files.

When one sets the contentType option to false, it forces jQuery not to add a Content-Type header, otherwise, the boundary string will be missing from it. Also, when submitting files via multi-part/form one must leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

To try and fix your issue:

You are using jQuery's .serialize() method which creates a text string in standard URL-encoded notation.

You need to pass un-encoded data when using "contentType: false".

Try using "new FormData" instead of .serialize():

Source: https://stackoverflow.com/a/20863123/3345051

Revised Code:

$("#form_save_file").submit(function(e) {

    e.preventDefault();

    var $this = $(this);
    var postURL = '/url/';
    var formData = new FormData(this);


    $.ajax({
           type: "POST",
           url: postURL,
           data: formData,
           mimeType: "multipart/form-data",
           contentType: false,
           cache: false,
           processData: false
    })
    .done(function(response) {
        // Do something if POST is successful
    })
    .fail(function() {
        // Do something if POST is unsuccessful
    })

})

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jan 11, 2016 at 7:08

Hybrid

7,0793 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hybrid Over a year ago

Great! If this answer worked, press the Check mark on the left so that others will see this answer if they need help as well

Saurabh Chandra Patel · Accepted Answer · 2018-06-10 10:47:47Z

0

disabled csrf on particular view with @csrf_exempt decorator and build custom security with a random number/string

answered Jun 10, 2018 at 10:47

Saurabh Chandra Patel

13.7k7 gold badges94 silver badges80 bronze badges

Collectives™ on Stack Overflow

Django-ajax: CSRF verification failed. Request aborted

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related