Preloader on file upload

Hey,

Since this feature is not available on CKEditor: when you press "Upload file", choose a file to upload and press to upload there is nothing indicating the upload is progressing. this is is a big UX flaw IMO.

...Therefore I would like to create it apart from the CK Core. I've been trying to find out how the API works, but I couldn't even figure out how to bind an event to a opening of a dialog. I need also to catch when an upload is completed/falied - although I can hack around that on the server side.

Any guidance would be appreciated

Tue, 04/15/2014 - 19:06

lfglopes

Joined: 15/04/2014

Posts: 2

Meanwhile found out CKEDITOR

Meanwhile found out CKEDITOR.editor.dialogShow

CKEDITOR.instances

> Object {post-textarea: a}

CKEDITOR.instances['post-textarea'].dialogShow(function(e) { console.log(e.evt, e.data); });

> TypeError: undefined is not a function

am I missing something?

Meanwhile the only alternative I have is playing around with the DOM... (disclaimer: this code is kind of ridiculous)

function createPreloader() {
   setTimeout(function(){ // any callback after this dialog is loaded!?
       $('.cke_dialog_ui_fileButton').click(function(){
           var filePath = $(this).parent().parent().parent().find('iframe').contents().find('input[type="file"]').val());
           if (filePath != '') {
               // it's uploading, sweet!
               $(this).insertAfter('<div class="ck-file-loader">Loading, please wait...</div>');
           }
       });
   }, 500);
}

// needs a callback refering to ckeditor after-initialization
$('.cke_button__image').click(createPreloader);
$('.cke_button__video').click(createPreloader);

Wed, 04/16/2014 - 15:36

alfonsoml

Joined: 31/12/2006

Posts: 3737

That's another of the

That's another of the features of the SimpleUploads plugin http://alfonsoml.blogspot.com/p/simpleuploads-plugin-for-ckeditor.html As long as you're being paid for your work you'll find that any of its features is worth the price, and you get the whole lot of enhancements as well as all future updates