ckeditor : set header while uploading an image

Question

I am using CKeditor 4. In that Image plugin.

I have removed unwanted tabs on Image popup and also set the config.filebrowserImageUploadUrl to my server's URL.

Now I have to upload the image, I am able to select the image, then when I click on Send it to server button, AJAX call goes to my server, But my server requires a particular header set for authentication.

Question is - can I set the header before sending that request ?

Answer 1

The default upload tab of CKEditor doesn't use any AJAX call to upload files. It's just an iframe with a normal form and file input, so you can't change the request headers.

If you want to upload files with an AJAX call then you must write your own code or use the SimpleUploads plugin, and configure it to your needs. (disclaimer: I'm its author)

Answer 2

If you are using CKEditor version 4.9 + then there is one way you can do this.

I faced the same problem while working, so after some search and trying some code samples I found the way.

There are some configurations that you have to set,

again I repeat this is for CKEditor version 4.9 +.

set below configuration in your ckeditor config object

{
     filebrowserUploadUrl : 'your upload path goes here',
     filebrowserUploadMethod: 'xhr',             
     fileTools_requestHeaders: {
           'X-Requested-With': 'XMLHttpRequest',
           'your_custom_header_name': 'custom_header_value' 
     }
}

I will attach a reference here

fileTools_requestHeaders

filebrowserUploadMethod

In the code sample above,

filebrowserUploadUrl: is the api-url that ckeditor will call while uploading

when uploaded ckeditor emits fileUploadRequest event,

you can change/set headers after catching that event too.

filebrowserUploadMethod: when set to 'xhr', it allows you to set the extra headers, by default value will be 'xhr' only.