How to show uploading progress in CKEditor?

Question

I'm adding a plugin that allow user to upload and display video to CKEditor. The file's size may be big so I'd like to display the upload progress.

Currently I'm using the default FileBrowser API to show the upload button, but the document doesn't mention about showing the progress.

How can I achieve this? Or do I need to write my own upload plugin?

Answer 1

You can trigger the event emitter to check if the upload is in progress

a sample code for s3 upload using nodejs

function s3uploads(filePath, callback){

var localFile = filePath;

    var onlyFileName = localFile.split("/");
    var fname = (onlyFileName[onlyFileName.length - 1]);

    var params = {
        localFile: localFile,

        s3Params: {
            Bucket: "ss3bucket",
            Key: "folder-name/" + fname,
            ACL: 'public-read',
            CacheControl: 'max-age=31536000',
            Expires: new Date || 'Wed Dec 31 2099 16:00:00 GMT-0800 (PST)'
            || 123456789
        }
    };

    var uploader = client.uploadFile(params);
            uploader.on('error', function (err) {
                console.error("unable to upload:", err.stack);
                return callback(err,null)
            });
            uploader.on('progress', function () {
                console.log("progress", uploader.progressMd5Amount,
                    uploader.progressAmount, uploader.progressTotal);
                var percentCal = ((parseInt(uploader.progressAmount) * 100) / parseInt(uploader.progressTotal)).toFixed(2);
                var percent = percentCal.toString();
                return callback(null,{type : 'progress', percent: percent, url : null});
            });
            uploader.on('end', function () {
                console.log("done uploading");

                return callback(null,{type : 'end', percent: '100', url : 'https://s3.us-east-2.amazonaws.com/s3bucket/folder-name/' + fname});

            });
}

And in the code block where you want to call this function you can use response.write() when the progress state is active and when the end state is achieved you can then pass res.end()

s3uploads(fileUrl, function (err, uploadResult) {
                if(err){
                    res.send("error");
                }

                if(uploadResult.type === 'progress'){
                    var html =  "<p>Please wait its uploading to server </p> <p></p>" ;

                    res.write(html);

                } else {
                    fileUrl = uploadResult.url;

                    res.write("<script type='text/javascript'>\
 (function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\
 window.parent.CKEDITOR.tools.callFunction('" + CKEcallback + "','" + fileUrl + "', '" + msg + "');\
 </script>");
                    res.end();
                }

            });