CSRF verification failed. Request aborted in a Django form

Question

I'm working on a image upload form. When the user uploads an image. Display that image with ajax in the preview area... The form reloads but it seems like it doesn't want to show the new avatar. And I get a CSRF verification failed. Request aborted error.

Reason given for failure: CSRF is missing or incorrect.

I have a csrf_token in place within the form.

Template:

<form class="nice inline-form" enctype="multipart/form-data" method="POST" action="/profile/edit/" id="avatarLoadForm">
      <input type="hidden" name="next" value="/account/settings/">
      {% csrf_token %}
      <div>
      <label for="avatar">Avatar</label>
      <div id="preview" class="frame">  
           <img src="{% if profile.user %}{% thumbnail profile.avatar 120x120 crop %}{% else %}{{ DEFAULT_AVATAR }}{% endif %}" alt="" alt="sample-pic" id="thumb" />
      </div>
      <input type="file" size="20" id="imageUpload">
      and other form info...
</form>

Ajax/Jquery:

$(document).ready(function(){

        var thumb = $('img#thumb'); 

        new AjaxUpload('imageUpload', {
            action: $('#avatarLoadForm').attr('action'),
            name: 'avatar',
            csrfmiddlewaretoken: $( "#csrfmiddlewaretoken" ).val(),

            onSubmit: function(file, extension) {
                $('#preview').addClass('loading');
            },
            onComplete: function(file, response) {
                thumb.load(function(){
                    $('#preview').removeClass('loading');
                    thumb.unbind();
                });
                thumb.attr('src', response);

            } 

        });

Maybe there's something I'm missing in my Views.py?

@login_required        
def edit_profile(request):
    context = base_context(request)
    if request.method == 'POST':
        notify = "You have successfully updated your profile."
        user_info_form = UserInfoForm(request.POST, request.FILES)
        if user_info_form.is_valid():
            if request.is_ajax():
                response = simplejson.dumps({"status": "Upload Success"})
                return HttpResponse (response, mimetype='application/json')
            messages.success(request, 'You have successfully updated your profile.')
            user_info_form.save(request.user, profile_type)
            return HttpResponseRedirect(request.POST.get('next', '/profile/' + request.user.username + '/'))
    else:
        initial = {}
        initial['first_name'] = request.user.first_name
        initial['last_name'] = request.user.last_name
        initial['email'] = request.user.email
        initial['about'] = profile.about
        initial['country'] = profile.country
        initial['about'] = profile.about
        user_info_form = UserInfoForm(initial=initial)
    context['user_info_form'] = user_info_form
    context['profile'] = profile
    return render_to_response('settings/profile.html', context, context_instance=RequestContext(request))

Settings.py:

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

The file upload works without the ajax crap. As to say, it actually saves the image, just doesn't show it in the preview. I really don't know what's wrong or why this is happening. There's been alot of posts regarding csrf failures. But I can't find one that pertains to this situation. Any insight would be very much appreciated.

Yuji 'Tomita' Tomita · Accepted Answer · 2012-05-01 22:19:55Z

3

What makes you think the csrf token has an id #csrfmiddlewaretoken? A quick look at your rendered html would reveal the template tag does not generate an id attribute.

Try $("input[name=csrfmiddlewaretoken]").val() instead

answered May 1, 2012 at 22:19

Yuji 'Tomita' Tomita

119k32 gold badges287 silver badges247 bronze badges

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

3 Comments

Modelesq Over a year ago

Thank you for pointing this out. Unfortunately its still returning the same error. I thought declaring it's type : 'POST' might do the trick. Doesn't work.

Yuji 'Tomita' Tomita Over a year ago

"Doesn't work" isn't enough: is your view receiving the request.POST dict with "csrfmiddlewaretoken" and an actual value? Try a javascript debugger or go into the view, and make sure the data is there. Also, you can use {{ csrf_token }} with the csrf middleware to directly inject the value into your POST function.

Modelesq Over a year ago

Do you think I could get your opinion on this? stackoverflow.com/questions/10453221/…

Amber · Accepted Answer · 2012-05-01 22:15:26Z

0

csrfmiddlewaretoken: $( "#csrfmiddlewaretoken" ).val(),

This probably won't work. The name/id of the CSRF field is generated dynamically and isn't a static string like this.

See https://docs.djangoproject.com/en/1.3/ref/contrib/csrf/#ajax for how to properly use the CSRF middleware with AJAX requests.

answered May 1, 2012 at 22:15

Amber

531k89 gold badges643 silver badges558 bronze badges

Comments

soField · Accepted Answer · 2012-05-02 07:02:02Z

0

see this http://djangolinks.com/detail/ajax-post-requests-csrf-fix-69/

answered May 2, 2012 at 7:02

soField

2,7369 gold badges37 silver badges44 bronze badges

1 Comment

abey Over a year ago

This link is broken.

Arctelix · Accepted Answer · 2013-02-14 00:06:27Z

This works for me:

beforeSend: function(jqXHR, settings) {
    jqXHR.setRequestHeader('X-CSRFToken', $('input[name=csrfmiddlewaretoken]').val());
},

Alternatively, you could extract the cookie out of the dom like so which is great if your form is generated via ajax and can not send the {{ csrf_token }} due to the way it renders:

beforeSend: function(xhr, settings) {
        console.log('-------------before send--');
        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;
        }
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
}

Collectives™ on Stack Overflow

CSRF verification failed. Request aborted in a Django form

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related