Elfinder: Problem with DnD in CKEditor integration (jQuery UI dialog mode)

[philouphil]

Hello,

This "How to" is good to me except that I get an error when I try to drag and drop a file (image) in the editor.

I'm using lastest CKEditor and latest elFinder.

The error message is editor is just "Can not upload", in my browser it says 2 errors:

1) Uncaught TypeError: Cannot read property 'setValue' of undefined
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.dialog.setValueOf (ckeditor.js:574)
at main.ckedialog.js:93
at HTMLImageElement. (main.ckedialog.js:63)
at HTMLImageElement.dispatch (jquery.min.js:3)
at HTMLImageElement.q.handle (jquery.min.js:3)

2)Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.
at a. (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/plugins/filetools/plugin.js?t=H4PF:7:418)
at a.h (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:11:178)
at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.event.CKEDITOR.event.fire (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:13:32)
at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:14:225)
at k.upload (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/plugins/filetools/plugin.js?t=H4PF:10:286)
at k. (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/plugins/filetools/plugin.js?t=H4PF:9:227)
at k.a.(anonymous function) (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:12:91)
at k.h (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:11:178)
at k.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.event.CKEDITOR.event.fire (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js:13:32)
at k.changeStatus (http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/plugins/filetools/plugin.js?t=H4PF:13:72)

Do you have any idea ? As you can imagine I am not a great developer ...

Thanx a lot !

[philouphil]

Or maybe to help me could you zip the files of https://hypweb.net/elFinder-nightly/demo/2.1/ckeditor.html so I can try out ? Thanx a lot

[nao-pon]

@philouphil I got same error with CKEditor 4.7. So I fixed it with following snippet. also I edited a wiki page with this code. Thanks! 👍

// Setup the procedure when send DnD image upload data to elFinder's connector
cke.on('fileUploadRequest', function(e){
    var fileLoader = e.data.fileLoader,
        xhr = fileLoader.xhr,
        formData = new FormData();
    e.stop();
    xhr.open('POST', fileLoader.uploadUrl, true);
    formData.append('cmd', 'upload');
    formData.append('target', elfDirHashMap.image);
    formData.append('upload[]', fileLoader.file, fileLoader.fileName);
    xhr.send(formData);
}, null, null, 4);

// Setup the procedure when got DnD image upload response
cke.on('fileUploadResponse', function(e){
    var file;
    e.stop();
    var data = e.data,
        res = JSON.parse(data.fileLoader.xhr.responseText);
    if (!res.added || res.added.length < 1) {
        data.message = 'Can not upload.';
        e.cancel();
    } else {
        elfInsrance.exec('reload');
        file = res.added[0];
        if (file.url && file.url != '1') {
            data.url = file.url;
            try {
                data.url = decodeURIComponent(data.url);
            } catch(e) {}
        } else {
            data.url = elfInsrance.options.url + ((elfInsrance.options.url.indexOf('?') === -1)? '?' : '&') + 'cmd=file&target=' + file.hash;
        }
    }
});

[philouphil]

Thank you for your answer, upload is now possible with the success message, but really just after this message the image disappears and it displays error message "Can not upload", I'm lost ...

[nao-pon]

Have you tried deleting all browser cache data?

It seems that there is no problem in my demo site.

[philouphil]

(The demo site is ok I think, even better than before (we can now even see uploading progress).)

Yes I did, but without success. I work on local server and I've just try on an online server, same problem.

"uploading in progress" (not sure of the text I'm using french translation)>"upload completed">image is displayed (but in full size whereas using imgShowMaxSize = 400)>image disappears>"Can not download"

I'm sorry maybe to make you waste some time I really apreciate your help.

Here is my source code if it can help : http://websco.org/V3/index.zip
Thanx a lot, really

[nao-pon]

I got it.

formData.append('target', elfDirHashMap.image);
to
formData.append('target', elfDirHashMap['image']? elfDirHashMap['image'] : elfDirHashMap['fb']);

[philouphil]

You are an ARTIST, it works perfect now !!! Thanx a lot

[nao-pon]

You are welcome! ㊗️

[7iomka]

It seems that there is no problem in my demo site.

Dear nao-pon, help me please! Could you provide a zip archive of files that are used in the demo site? I would be very grateful to you!
I'm working on a local server on windows 10 and experiencing a problem where I get a similar error "Can not upload."
In response from the server, I get {error: ["errCmdParams", "upload"]}
I spent about 2 days trying to find variations in the occurrence of this error, but I did not succeed (
I used the latest versions of the files.
Here is one of the attempts (at the root - the file ckeditor.html) elFinder-2-1.zip
I will be very grateful if you provide a zip archive of the current demo site, so I'm sure that the problem is in the environment, and I was looking for exactly where!

[nao-pon]

@7iomka My demo site is based on the Wiki document. And please check values elfUrl and elfDirHashMap in main.ckedialog.js that match to your environment.

cf. My demo site source

• https://hypweb.net/elFinder-nightly/demo/2.1/main.ckedialog.js

[7iomka]

@nao-pon With respect to elfUrl, I understand everything, but for what and what parameters should be correct for elfDirHashMap I do not know. I will be grateful if you explain.
As for the link to main.ckedialog.js - I just took it for an example, which I threw off in the previous answer in the archive, but I ask for a complete zip-archive of the example, to make sure that there is no problem with the php-part or with windows surroundings. Thanks!

[nao-pon]

@7iomka Oh, sorry. I found a bug of Wiki document. so I fixed it.

You can download a new version of main.ckedialog.js from https://studio-42.github.io/elFinder/#elf_l1_RG93bmxvYWRzL0V4YW1wbGU . Please try it.

elfDirHashMap can specify destinations for types with elFinder's folder hash value.

• ckeditor_example.zip(completed)

[7iomka]

@nao-pon Thank you very mutch! This problem is finally solved!
But there were several others.
On my project, I plan to connect the editor with the most simplified interface, so instead of the standard image upload window I use the plugin of ckeditor - image2 (Enhanced Image)

Accordingly, adding this plugin to the configuration of extraplugins, I noticed that it does not work with him to pick up the url and other properties of the image selected in elfinder. And this is despite the fact that, according to the documentation, it works in place of the standard plug-in image in the same way.
I will be grateful to any of your advice if this is within the scope of this issue!

[nao-pon]

@7iomka I added "image2" support into Wiki document. Please check it.

[7iomka]

@nao-pon, Thank you very much, you are a wonderful man!
But there are very few left, and you probably missed something, because D & D again stopped working, the error {error: ["errCmdParams", "upload"]} returned :'-|

[nao-pon]

Oh my... I made mistake again...

I fixed Wiki document. Please check this diff.

[7iomka]

Oh, such a small mistake)
And finally everything works as it should!
Thank you so much!!
@nao-pon You are the best!