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.

enter image description here

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

enter image description here

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

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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'));
    }   
});

score -1 · Answer 2 · edited May 23 '17 at 11:49

-1

If you are trying to upload an image through ajax request then you must have to look CSRF validation in ajax.

OR if not then THIS question may help you.

edited May 23 '17 at 11:49

Community

1
1

answered Dec 21 '12 at 07:26

Ahsan

11,516
12
52
79

Iam not using django views directly to this jbimages. Iam using tinymce editor html in that. Iam using the "jbimages" plugin and it will render the plugin details. At that time it is showing.Other than that, it works. – Raji Dec 21 '12 at 09:20

Django with jquery-tinymce image upload plugin

2 Answers2

CSRF_AJAX_PATCH

Linked