How to add a field to POST values in CKeditor upload

Question

I use django and ckeditor to provide wysiwyg taste to TextEdits. I would like to use CKEditor file upload function (in filebrowser / image dialog), but the POST made by CKEditor to upload the image just contains the file data.

This is a problem for CSRF checking. I couldn't find in CKEditor documentation and source a place to change the POST data for file upload, to add django's csrf_token in POST data.

As a workaround, I can change the filebrowserUploadUrl parameters to include csrf data in upload URL, use the @csrf_exempt for the upload view, and check request.GET parameters to check csrf. But is this solution safe ?

Anyway, if somebody knows how to include csrf token directly within CKEditor file upload POST data, i'm strongly interested...

Answer 1

You can register for the dialogDefinition event, and completely rewrite the upload tab, thus:

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName == 'image') {
    dialogDefinition.removeContents('Upload');
    dialogDefinition.addContents({
      title: "Upload",
      id: "upload",
      label: "Upload",
      elements: [{
        type: "html",
        html: '<form><input id="imageupload" type="file" name="files[]" />{%csrf_token%}</form>'
      }]
    });
   }
});

This is an untested simplification of my real-world version, but hopefully it shows the idea.

This does not set the URL field in the image dialog, so clicking OK on the dialog will give you an error message. You will need to set that on a successful upload, thus:

CKEDITOR.dialog.getCurrent().getContentElement('info', 'txtUrl').setValue(theURL);

Answer 2

The extra data sent to the server is passed by get request. I was trying to add extra data and finally achieve this adding to a url parameters of the form that is used to send data

CKEDITOR.on('dialogDefinition', function(ev)
   {
     var dialogName = ev.data.name;
     var dialogDefinition = ev.data.definition;
     if (dialogName == 'image')
     {
           dialogDefinition.contents[2].elements[0].action += '&pin=123456';
            /* 2 is the upload tab it have two elements 0=apparently is the
            and 1: is the button to perform the upload, in 0 have the action property with the parameters of the get request simply adding the new data               
              */ 

     }
   });