CODEWITHSUNDEEP
coldfusionckeditorckfinder
Joe C
Joe C

Reputation: 3546

Getting wrong responses from CKFinder when inserting images via drag and drop

I'm using CKEditor 4.5.1 with CKFinder 2.5 for ColdFusion 8 and the Enhanced Image and Upload Image plugins.

I've successfully integrated CKFinder with CKEditor, and I can insert images into the editor using the normal CKFinder interface. They upload to the correct folder and show up in the editor just fine. I can drag and drop images into the CKFinder interface, and they upload and display in the CKEditor just fine.

However, when I try to drag and drop the images directly into the editor window, I get an "incorrect server response" message.

Using Chrome's developer tools and Fiddler, I see that when I drag and drop the images into CKFinder's interface, it's calling the QuickUpload method of the connector and returning back a proper JSON response. When I drag and drop the images into the editor's interface, it calls the same QuickUpload method, the upload fails and only returns back a 0, and no JSON at all. The documentation says that even with a failure, it should still be sending back JSON with an error message.

I've instantiated the CKEditor normally.

<script src="/js/plugin/ckeditor/ckeditor.js"></script>
<script src="/js/plugin/ckfinder/ckfinder.js"></script>
<script type="text/javascript">
    CKEDITOR.replace( 'message');
</script>

In my config.js file for the editor, I've set my required urls.

config.filebrowserBrowseUrl = '/js/plugin/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '/js/plugin/ckfinder/ckfinder.html?type=Images';
config.filebrowserUploadUrl = '/js/plugin/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/js/plugin/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Images';

I activated the Upload Image plugin (all of the dependencies were downloaded with the build).

config.extraPlugins = 'image2,uploadimage';

According to the docs, I should not need to set config.uploadUrl since I have config.filebrowserUploadUrl set, but I've also tried setting uploadUrl with no difference in result.

Why is CKFinder failing to upload and sending back the wrong response when I drag and drop into the main CKEditor interface?

Upvotes: 4

Views: 5621

Answers (2)

jodator
jodator

Reputation: 2475

CKFinder from 2.5.0 supports the JSON response. In order for this to work, there must be the responseType=json url parameter set for request when using only config.uploadUrl config:

config.uploadUrl =
    '/js/plugin/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Files&responseType=json';

If you're using filebrowserUploadUrl then CKEditor will add this flag for you.

But if you have set both confing.uploadUrl and filebrowserUploadUrl then only config.uploadUrl is taken into account for uploading files via d&d.

Upvotes: 1

Wiktor Walc
Wiktor Walc

Reputation: 5560

I just tried the following code and it works completely fine for me:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.5.1/standard-all/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.replace( 'editor1', {
                filebrowserBrowseUrl: '/js/plugin/ckfinder/ckfinder.html',
                filebrowserImageBrowseUrl: '/js/plugin/ckfinder/ckfinder.html?type=Images',
                filebrowserUploadUrl: '/js/plugin/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Files',
                filebrowserImageUploadUrl: '/js/plugin/ckfinder/core/connector/cfm/connector.cfm?command=QuickUpload&type=Images',
                extraPlugins: 'image2,uploadimage'
}           );
        </script>
    </body>
</html>

Just make sure you are using the latest version of CKFinder (2.5.0.1).

The uploadUrl config does not have to be set if you already specified filebrowserUploadUrl.

Upvotes: 0

Related Questions