Django with jquery-tinymce image upload plugin

Question

I have installed jbimages from http://justboil.me/ into jquery-tinymce folder of my django project for getting local images from computer.

When I upload image, it is throwing the error as "This is taking longer than usual.An error may have occurred." It is showing the script output error as "CSRF verification failed. Request aborted." But i already gave {% csrf_token %} in the form of dialog.htm.

Iam getting the error after selecting the image as shown below:

Can anyone help me how to get rid of this issue?

Answer 1

seems like the form is being posted using ajax. If you are using ajax to post the form make sure you include the csrf_token in the POST data. which in this case you are missing.

Alternatively add the following script to your base.html and it will take care of updating the csrf_token for each Ajax request.

CSRF_AJAX_PATCH

$(document).ajaxSend(function(event, xhr, settings) {
    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 sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }   
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }   

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }   
});